使div擴展爲佔用所有可用空間

Question

我想要一個類似桌面的整頁寬度佈局。 頂部的某些菜單（未知高度，取決於內容）， 和底下的div，它佔用視口中的所有可用空間。

div { 
 
    padding: 0px 
 
} 
 

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

 
.outer { 
 
    background: olive; 
 
    height: 100%; 
 
} 
 

 
.menu { 
 
    background: orange; 
 
} 
 

 
.should_fill_available_space { 
 
    background: brown; 
 
}

<div class="outer"> 
 
    <div class="menu"> 
 
    Lorem Ipsum Lorem Ipsum Lorem Ipsum 
 
    </div> 
 
    <div id="this" class="should_fill_available_space"> 
 
    Brown color should go all the way down 
 
    </div> 
 
</div>

我有這種情況下的codepen： https://codepen.io/marek-zganiacz/pen/NvEaxr

我想should_fill_available_space走一路下跌，如情況下menu將有height:10%和should_fill_available_space有'高度：90％'。

Answer 1

最簡單的方法是使用flexbox。

1. 您將display: flex分配給父容器。在你的情況下，這是外.outer。
2. flexbox在單一方向工作。所以你可以把它們看作一列（垂直）或一排（水平）。默認設置是它將子元素分散到一行上。但我們想創建一個列。因此，我們必須將.outer上的flex-direction更改爲flex-direction: column。
3. 現在我們需要指定我們希望Flexbox如何分配.outer中的可用空間量。正常的行爲是flexbox給它的孩子正常的寬度/高度。但通過將flex:1分配給.should_fill_available_space，該元素將獲得所有額外的可用空間。 Flexbox基本上說的是我們希望計算機使用全部1/1 = 100％（使用的彈性值除以所有兒童的總彈性值）可用空間適用於.should_fill_available_space，同時保持最小的寬度爲.menu寬度。技術上flex:是一些其他屬性的簡寫，但這對這個問題並不重要。

這是你的JS-小提琴：https://jsfiddle.net/cryh53L7/

HTML

<div class="outer"> 
    <div class="menu"> 
    Lorem Ipsum 
    Lorem Ipsum 
    Lorem Ipsum 
    </div> 
    <div id="this" class="should_fill_available_space"> 
    Brown color should go all the way down 
    </div> 
</div> 

CSS

div{ 
     padding: 0px 
    } 
    html, body{ 
     height: 100%; 
     padding: 0px; 
     margin: 0px; 
    } 
    .outer { 
     display: flex; 
     flex-direction: column; 
     background: olive; 
     height: 100%; 
    } 
    .menu{ 
     background: orange; 

    } 
    .should_fill_available_space{ 
     flex: 1; 
     background: brown; 

    } 

Answer 2

您可以直接指定高度屬性。

因此，第一個div元素將有height of 10%，第二個將有height of 90%。

Answer 3

Try this!

我使用的表格顯示，我希望它是好的，爲你:)

HTML：

<div class="outer"> 
<div class="menu"> 
    Lorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
    Lorem Ipsum 
    Lorem IpsumLorem Ipsum 
</div> 
<div id="this" class="should_fill_available_space"> 
    Brown color should go all the way down 
</div> 

CSS：

div{ 
padding: 0px 
} 
html, body{ 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 
.outer { 
background: olive; 
height: 100%; 
display:table; 
width:100%; 
} 
.menu{ 
background: orange; 
display:table-row; 

} 
.should_fill_available_space{ 
background: brown; 
display:table-row; 
} 

div+ div{ 
height:100%; 
} 

Answer 4

您可以使用CSS3中的flexbox實現此目的（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）。

更新你的CSS這樣看它的工作：

.outer { 
    background: olive; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
} 

.should_fill_available_space{ 
    background: brown; 
    flex-grow: 2; 
} 

Answer 5

這是網頁文檔標準的世界滿足基於視窗的桌面應用程序仿真。你需要容器​​被絕對定位。在這些容器中，您將能夠設置相對位置元素或使用將使用html流的元素。

這裏有很多API，它們只是在封面下面做的，它們總是依賴於JavaScript計算來將元素在連接到DOM後根據其尺寸進行放置。

這是基於你的代碼一個簡單的例子：

div{ 
    padding: 0px 
} 
html, body{ 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 
.outer { 
    background: olive; 
    height: 100%; 
    width:100% 
    position:absolute; 
} 
.menu{ 
    background: orange; 
} 
.should_fill_available_space{ 
    background: brown; 
    position:absolute; 
    bottom:0px; 
    width:100vw; 
} 

<div class="outer"> 
    <div id="menu" class="menu"> 
    Lorem Ipsum 
    Lorem Ipsum 
    Lorem Ipsum 
    </div> 
    <div id="this" class="should_fill_available_space"> 
    Brown color should go all the way down 
    </div> 
</div> 

正如我所說，你可以使用JavaScript來檢索菜單的尺寸，比應用，爲您的佈局。

window.addEventListener("load", function load(event){ 
    var menu = document.getElementById("menu"); 
    var main = document.getElementById("this"); 
    var menuHeight = menu.offsetHeight; 
    main.style.top = menuHeight + "px"; 
},false); 

和here is the codepen。