CSS可以自動調整div的大小以適合瀏覽器的其余部分

Question

我有一個要創建的頁面，我要在其中列，第一列具有固定的大小，第二列必須填充其余的窗口寬度。 到目前為止，這是我提出的內容，但並未奏效。

HTML：

<div id="container">
        <div class="nav"></div>
        <div class="page">my page content</div>
</div>

CSS：

#container{
    width: 100%;
    padding: 0 0;
}
#container > div{
    color: white;
}
.nav{
    width:200px;
    height:500px;
    float:left;
    background-color:#666;
}
.page{
    height:500px;
    float:left;
    background-color:#FFF;
}

JS菲德爾

Answer 1

只需刪除float: left然后將width: 100%添加到.page

http://jsfiddle.net/scNSL/2/

Answer 2

真正適合（允許邊框）

更改為此（ 請參見小提琴 ）：

.page{
    height:500px;
    overflow: hidden; /* or auto */
    background-color:#FFF;
}

通過不浮動.page並設置除visible之外的overflow ，瀏覽器用浮動元素旁邊的空間填充塊級元素（ 此處有很好的解釋 ）。

為什么這比設置width: 100%更好width: 100%

將這些div元素與邊框進行比較。 一種具有 100% width ， 一種具有如上所述的overflow設置。

Answer 3

您可能可以這樣做： http : //jsfiddle.net/scNSL/4/

<div id="container">
    <div class="page">
        <div class="nav"></div>
        Inhalt
    </div>
</div>

#container{
    width: 100%;
    padding: 0 0;
}
#container > div{
    color: white;
}
.nav{
    width:200px;
    height:500px;
    float:left;
    background-color:#666;
}
.page{
    height:500px;
    width:100%;
    float:left;
    background-color:#333;
}

Answer 4

嘗試這個，

.page{
    height:500px;
    width:100%;
    background-color:#FFF;
}

注意：刪除了float:left; 加上width:100%;

Answer 5

不用自己寫...

請查看這篇文章以獲取更多信息： http : //css-tricks.com/fluid-width-equal-height-columns/

應該可以幫助您了解有關等高列100％高度等的更多信息。

Answer 6

嘗試這個：

#container{
    width: 100%;
    padding: 0 0;
}
#container > div{
    color: white;
}
.nav{
    width:40%;
    height:500px;
    float:left;
    background-color:#666;
}
.page{
    height:500px;
    width: 60%;
    float:left;
    background-color:#333;
}

Answer 7

創建固定+流體柱布局的經典方法是使用填充將一個元素浮動到另一個元素旁邊：

_HTML：

 <div class="container"> <div class="nav"></div> <div class="page">content</div> </div> 

_{CSS（浮動）：}

 .container { color: #FFF; } .nav { background-color: #666; float: left; height: 200px; width: 200px; } .page { background-color: #333; height: 200px; padding-left: 200px; } 

這有一些缺點，尤其是當.nav和.page元素的高度不同時，或者當您想在.page元素周圍添加邊框時。

創建固定+流體色譜柱布局的現代方法是使用flexbox ：

 .container { color: #FFF; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; } .nav { background-color: #666; height: 200px; width: 200px; } .page { background-color: #333; -webkit-flex: 1; flex: 1; height: 200px; } 

擺弄 _{（原諒BEM類，使用它們是為了更容易看出這兩種方法之間的CSS差異）}