Question

我正在尝试以分钟为中心创建一个以方格为中心的页面。 600px高度。页面应与文本一起展开。（OFC）。该页面还有一些基于图片的边框，应该跟随页面。（显然）

我觉得我现在已经尝试了一百万种组合。问题似乎是如果外部div没有固定高度，则div边框无法自动调整。由于文本的扩展，外部div不能有固定的高度。

看起来很简单。还有很多建议。（这不起作用。）我做过一些根本错误的事吗？

以下是页面：http://bymosegaard-hillerod.dk/info.aspx （请注意，边框没有到达底部。）

供将来参考。这是代码：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title>...</title> 
        <link href="..." rel="stylesheet" type="text/css">      
    </head> 
<body>

    <div id="container">
        <div id="topborder"></div>
        <div id="leftborder"></div>
        <div id="page">
            <div id="pageheadtext">...</div>
            <div style="float: right; margin-top: 30px;"><img src="/media/banner.jpg"></div>
            <div id="menubar" style="margin-top: 210px;">
                ...
            </div>
            <div id="sideNavigation"></div>
            <div id="bodyText" style="margin-top: 20px;">
                ...
            </div>
        </div>
        <div id="rightborder"></div>
        <div id="bottomborder"></div>
        <div id="footer">...</div>
    </div>

</body>
</html>

样式表：

BODY
{
    background-color: rgb(248, 248, 243); 
    background-image: url(/media/bodyBg.gif); 
    background-repeat: repeat-x; 
    color: rgb(102, 102, 102); 
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    font-size: 10px; 
    height: 95%;
}

H1
{
    font-family: Verdana, Arial;
    font-size: 14px;
    color: #333;
    font-weight:normal; 
}

#pageheadtext
{
    margin-top: 40px;
    margin-left: 35px;
    font-family: Verdana, Arial;
    font-size: 14px;
    color: #333;
    text-align: left;
}

#container
{
    margin: 0 auto 0 auto; 
    width: 786px;
    overflow: hidden;
    min-height: 600px;
}

#topborder
{
    background-image: url(/media/frameTopBg.png); 
    background-repeat: no-repeat; 
    display: block; 
    height: 8px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    margin-top: 0px; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    width: 100%;
}

#leftborder
{
    float: left; 
    background-image: url(/media/frameLeftMiddleBg.png); 
    background-repeat: repeat-y; 
    width: 13px;
    min-height: 600px;
    height: auto;
}

#page
{
    background-color: white; 
    display: block; 
    float: left; 
    height: 100%; 
    margin-left: 0px; 
    text-align: left; 
    width: 760px;
}

#rightborder
{
    float: right; 
    background-image: url(/media/frameRightMiddleBg.png);   
    background-repeat: repeat-y; 
    width: 13px;
    min-height: 600px;
    height: 100%;
}

#bottomborder
{
    background-image: url(/media/frameBottomBg.png); 
    background-repeat: no-repeat; 
    clear: both; 
    display: block; 
    height: 13px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    margin-top: 0px; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    width: 100%;
}

#menubar
{
    background-image: url(/media/menubar.jpg);  
    background-repeat: no-repeat; 
    display: block; 
    height: 27px; 
    width: 760px;
}

#topmenuitem
{
    color: rgb(102, 102, 102);
    cursor: auto;
    line-height: 24px;
    outline-color: rgb(102, 102, 102);
    outline-style: none;
    outline-width: 0px;
    padding-bottom: 0px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0px;
    text-decoration: none;
}

#sideNavigation
{
    float: left;
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    margin-left: 35px;
    margin-top: 32px;
}

#bodyText
{
    float: right;
    margin-right: 194px;
    width: 400px;
    height: 100%;
}

#footer
{
    text-align: center;
}

#doctable
{
    font-size: 10px;
}

顺便说一下，这个页面是CMS驱动的，所以我不能只是破解一个违规的页面。而且我真的想解决这个问题。

Answer 1

您的 CSS 过于复杂， HTML 结构也是如此，不要说设计是旧的，字体几乎无法读取。最重要的是，你使用内联样式加以调整...这只会导致修复修复，而不是回答客户端调用只进行简单的编辑/修改。
难以维护。 保持简单。

不管你信不信，这就是你所需要的：

<强> jsBin demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My page</title>
  </head>
  <body>

    <div id="container"> 
      <h1>Bymosegård i Hillerød</h1>
      <img src="http://bymosegaard-hillerod.dk/media/banner.jpg">

      <nav>
        <ul>
          <li><a href="">Forside</a></li> 
          <li><a href="">Info</a></li>
          <li><a href="">Regnskaber</a></li>
          <li><a href="">Referater</a></li>
          <li><a href="">Kontakt</a></li>
        </ul>
      </nav>

      <div id="content">
        <h2>Foretningsorden, relementer mm.</h2>
        <p>Foretningsorden, relementer, vedtægter mm.</p>
        <p>&nbsp;</p>
        <h3>Vedtægter</h3>
        ................. etc
      </div>
    </div>       
    <div id="footer">Bymosegårds Alle 3-9, 3400 Hillerød</div>

  </body>
</html>

CSS：

*{ margin:0; padding:0; } /* Global reset */
body{
  background:#EEEDE4;
  font: 10px/1.4 Helvetica, Arial, Verdana, sans-serif; 
  color: #666;
}
h1, h2, h3, p, ul, ol{
  margin: 7px 30px;
  font-weight:200;
}
h1{
  color:#333;
  font-size:1.5em;
  padding:25px 0
}
ul, ol  { padding-left:1.4em; }
nav     { background: #E9E9E9; }
nav li  { display:inline-block; }
nav li a{ display:inline-block; padding:5px 15px; }
#container > img{ width:100%; }
#container{
  position:relative;
  margin: 15px auto;
  width: 786px;
  background: #fff;
  padding:10px;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
#content{ margin:30px 100px; }
#footer{ text-align:center; }

自动扩展边框，div，页面

1 个答案: