正確對齊Div

我需要一些認真的CSS幫助來處理當前的項目。我附上了我希望我的頁面看起來像的屏幕截圖。我遇到的問題是正確定位div，以及使頁面的寬度/高度保持100％。我想在不使用Javascript的情況下做到這一點。這是我的HTML：正確對齊Div

<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>

這是我的CSS：

.wrapper{ 
    min-height: 100%; 
    min-width: 100%; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
} 
.container_16 { 
    margin-left: auto; 
    margin-right: auto; 
    width: 960px; 

    min-height: 100%; 

    /* Set up proportionate scaling */ 
    height: auto; 
    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%; 
}

形象有什麼我希望它看起來像（橫跨整個瀏覽器窗口）： enter image description here

實際： enter image description here

來源

2013-03-01 Yecats

我不知道的顯示全高，除非你想一個好辦法底部綠色的酒吧永遠在那裏。當你獲得一些內容時，底部的綠色條應該向下移動。 – Leeish 2013-03-01 23:19:50

.content-16 - 它是否有任何內容？將其設置爲高度：100％不能保證延伸。另外，你是否設置你的HTML和身體寬度：100％;高度：100％;？ – 2013-03-01 23:19:51

如果你想讓你的內容-16能夠變大，我會設置'min-height'而不是'height'。如果它是父元素，它將是100％的高度。 – Leeish 2013-03-01 23:21:11

html,body { 
    height: 100%; 
} 
.container_16 { 
    min-height: 100%; 
}

也許嘗試一下。或者做一個小提琴，這樣我們可以混淆你的代碼。

編輯

http://jsfiddle.net/LMFL5/4/（小提琴不會，除非你有兩個監視器和跨度橫跨兩者爲960太小，做到公正，調節包裝寬度喜歡500看到它在這樣你也可以很容易地爲你的包裝設置斷點並製作一個半響應網站，我不再這樣做，我使用柔性寬度爲960的網格。我做你在說的很多東西。

HTML

<body> 
    <div class="container_24"> 
     <div class="wrapper"> 
      <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> 
    <div class="container_16"> 
     <div class="wrapper"> 
      <form id="form1" runat="server"> 
      Adding some content 
      </form> 
     </div> 
    </div> 
    <div class="container_24 footer"> 
     <div class="wrapper">Footer</div> 
    </div> 
</body>

CSS

html, body { 
    height:100%; 
    margin: 0; 
} 

.wrapper{ 
    width: 960px; 
    margin: 0 auto;  
} 
.grid_16 { 
    text-align: center; 
} 
.container_16 { 
    width: 100%; 
    height: 100%; 
} 
.container_16 .wrapper { 
    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); 
    height: 100%; 
} 
.container_24 { 
    background-image: url(../images/headerFooter_bkg.gif); 
    background-color: green; 
    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%; 
} 
.container_24.footer { 
    bottom: 0; 
    position: fixed; 
    z-index: 3; 
}

什麼，我做你的寬度最關鍵的是做一個普通960的包裝，包括我在每一個DIV。牆壁上的所有內容都位於960空間中，但您可以將div全屏顯示。這個站點：http://960.gs/有一個CSS生成器，它可以完成你想要做的事情，你的代碼大部分看起來像是來自這個相同的類模式。這裏可以生成您所需的列數：http://grids.heroku.com/

基本上，如果你想要一個全屏寬div，只需將其中一個.content div包裝好，你就可以走了。

來源

2013-03-01 23:23:22 Leeish

這並沒有解決它..雖然根據您的建議，我創建了一個小提琴：http://jsfiddle.net/LMFL5/ – Yecats 2013-03-02 04:59:05

http://jsfiddle.net/LMFL5/2/你有一些高度覆蓋的東西。這解決了一些問題。你可能需要調整你的陰影和東西。 – Leeish 2013-03-02 16:03:05

這看起來好多了，但並不完全是我想要的確切輸出。頁眉/頁腳位於正確的位置，內容跨越，但我需要的內容部分只有960px寬，而不是整個頁面，如頁眉和頁腳。順便謝謝你的幫助！ – Yecats 2013-03-03 00:04:17

爲100％，最小高度佈局參見here

來源

2013-03-01 23:28:01

這不起作用，因爲我希望我的頁眉/頁腳跨越整個頁面。看來，如果我將容器的寬度更改爲100％，並將內容寬度更改爲960像素，則不會正確註冊。（內容將跨越整個頁面。） – Yecats 2013-03-02 05:42:25

@Yecats可能是這一個幫助你

.wrapper 
    { 
     height: 100%; 
     min-width: 100%; 
     /* Set up proportionate scaling */ 
     width: 100%; 
     /* Set up positioning */ 
     position: relative; 
     top: 0; 
     left: 0; 

    }

來源

2013-03-02 11:28:12 snowp

正確對齊Div

回答

相關問題