CSS - 跨度div整個頁面的高度

我已經編碼了我的div，以便它們（幾乎）完美顯示。正確的div位於彼此的上方/下方，並跨越頁面的整個寬度。我發現的是它並沒有跨越整個頁面的高度。任何建議將不勝感激！另外，我還有一個我很想離開的水平滾動條。 :)CSS - 跨度div整個頁面的高度

CSS：

body { 
    color: #333; 
    font-size: 11px; 
    font-family: "Myriad Pro", Arial, Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif; 
    position: relative; 
} 

.container_16 { 
    margin-left: auto; 
    margin-right: auto; 
    width: 960px; 
    margin-top:0px; 
    padding-top:0px; 
     min-height:800px; 
    background-image:url(../images/Content_bkg.gif); 
     box-shadow: 0px 0px 15px rgb(0,0,0); 
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0); 
} 
.container_24 { 
    background-image: url(../images/headerFooter_bkg.gif); 
    height: 60px; 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid rgb(71, 89, 32); 
    box-shadow: 0px 0px 15px rgb(0,0,0); 
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0); 
    position:relative; 
    width:100%; 
}

HTML：

<body> 
     <div class="container_24"> 
      <div class="grid_16"> 
       <input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span> 
      </div> 
     </div> 
     <div class="container_16"> 
      <form id="form1" runat="server"> 
       <asp:ContentPlaceHolder ID="Body" runat="server"> 

       </asp:ContentPlaceHolder> 
      </form> 
     </div> 
     <div class="container_24"></div> 

</body>

UPDATE：這是我的代碼看起來像下面提供的包裝概念。

.wrapper{ 
    height:100%; 
} 

.container_16 { 
    margin-left: auto; 
    margin-right: auto; 
    width: 960px; 
    margin-top:0px; 
    padding-top:0px; 
    background-image:url(../images/Content_bkg.gif); 
     box-shadow: 0px 0px 15px rgb(0,0,0); 
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0); 
} 
.container_24 { 
    background-image: url(../images/headerFooter_bkg.gif); 
    height: 60px; 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid rgb(71, 89, 32); 
    box-shadow: 0px 0px 15px rgb(0,0,0); 
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0); 
    position:relative; 
    width:100%; 
}

HTML：

<body> 
    <div class="wrapper"> 
     <div class="container_24"> 
      <div class="grid_16"> 
       <input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span> 
      </div> 
     </div> 
     <div class="container_16"> 
      <form id="form1" runat="server"> 
       <asp:ContentPlaceHolder ID="Body" runat="server"> 

       </asp:ContentPlaceHolder> 
      </form> 
     </div> 
     <div class="container_24"></div> 
     </div> 
</body>

截圖：

enter image description here

來源

2013-02-28 Yecats

首先暗示了對CSS想出了：不要混搭內聯和外部CSS。調試和製作混亂的代碼是一種痛苦。你有'container_16'的CSS定義，但是你也有該div的內聯樣式。 – 2013-02-28 19:11:33

謝謝 - 我忘了我甚至把它放在那裏。 :)我已經刪除它，並更新我的代碼上面。 – Yecats 2013-02-28 19:14:45

你已經明確給出height每個容器，只有這樣纔能有（視覺）全高將封閉一切都在包裝height: 100%或類似

編輯：澄清例如：

<body> 
    <div id="wrapper"> 
    <!--Your stuff here--> 
    </div> 
</body>

在上述例子中

，包裝得到100％的高度，而不是內容。

來源

2013-02-28 19:12:05 hexblot

如果我更改代碼以反映身體和容器16中100％的高度，那麼容器16將完全從視圖中消失。 – Yecats 2013-02-28 19:16:42

我以前曾嘗試過 - 它也沒有解決它。（與我上面概述的結果相同）。澄清 - 包裝有高度：100％，容器16有100％的最小高度 – Yecats 2013-02-28 19:19:53

您可能想使用javascript來獲取頁面的高度。然後對每個容器做一些數學運算，以獲得容器與高度的正確比率來填充頁面。

來源

2013-02-28 19:12:57

在這種情況下，不需要JavaScript。我會認爲這是一個低效的建議。 – Axel 2013-02-28 19:17:38

那我一定是誤解了這個問題。 – 2013-02-28 19:23:51

我想你要確切地確定頁面寬度的高度&。我之前曾問過類似的問題。看一看：How to find page width in Opera 12 (for Desktop Windows)?

我做RND上相同，與results

來源

2013-02-28 19:34:33 nefarianblack

CSS - 跨度div整個頁面的高度

回答

相關問題