自動擴展邊框，div，頁面

我正在嘗試在分鐘處創建一個以方形爲中心的頁面。 600px高度。該頁面應與文本一起展開。（Ofc。）頁面也有一些基於圖片的邊框，應該在頁面後面。（很明顯）。自動擴展邊框，div，頁面

我想現在我已經嘗試了一百萬個組合。問題似乎是，如果外部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驅動的，所以我不能只砍了一個違規網頁。我真的很想解決這個問題。

來源

2014-09-03 Illishar

你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; }

來源

2014-09-03 14:27:43

奧赫，我吸。 ^^謝謝。 – Illishar 2014-09-03 15:38:24

自動擴展邊框，div，頁面

回答

相關問題