CSS塊佈局全屏

Question

能喜歡做的屏幕布局的大致是這樣的：

整個瀏覽器窗口應填充爲白色區塊「已知的」高度只有兩個元素頂部，左側和底部，左側（對於兩個標籤，因此已知將相對於字體）。一切應與瀏覽器窗口縮放，即左邊欄是15％寬，右邊85％，等等。

作爲一個C++開發者我的直覺這裏是處理在Javascript中的事件和對DOM的代碼，但我」我覺得這對CSS來說相對來說不重要。

任何人都可以幫助我嗎？

Answer 1

我試圖快速重現：

* { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body, 
 
.wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.left, 
 
.right { 
 
    float: left; 
 
} 
 
.left { 
 
    position: relative; 
 
    width: 15%; 
 
    height: 100%; 
 
} 
 
.left .label-top, 
 
.left .label-bottom { 
 
    position: absolute; 
 
    width: 100%; 
 
    background-color: #fff; 
 
} 
 
.left .label-top { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.left .label-bottom { 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
.left .content, 
 
.left .top, 
 
.left .bottom { 
 
    border: 1px solid white; 
 
} 
 
.left .top, 
 
.left .bottom { 
 
    height: 5%; 
 
    background-color: gray; 
 
} 
 
.left .content { 
 
    height: 30%; 
 
    background-color: #a09898; 
 
} 
 
.right { 
 
    width: 85%; 
 
    height: 100%; 
 
    background-color: gray; 
 
} 
 
.right::after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="wrapper"> 
 
    <div class="left"> 
 
    <div class="label-top">Label</div> 
 
    <div class="top"></div> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div class="bottom"></div> 
 
    <div class="label-bottom">Label</div> 
 
    </div> 
 
    <div class="right"></div> 
 
</div>

Answer 2

對於佈局，請考慮使用定位和顯示屬性。有很多方法可以創建動態結構，確保響應。

有關詳細信息，請參閱this question and answer瞭解創建網站時可能會考慮的一些「常規」規則。

.left { 
 
    position: absolute; 
 
    lefT: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 15%; 
 
    background: lightgray; 
 
} 
 
.right { 
 
    position: absolute; 
 
    left: 15%; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 85%; 
 
    background: dimgray; 
 
} 
 
.left .fixedBlock { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 50px; 
 
    background: blue; 
 
} 
 
.left .filledDiv { 
 
    height: calc(100% - 100px); 
 
    background: tomato; 
 
} 
 
.left .filledDiv .third { 
 
    height: 33.33%; 
 
    background: rgba(0, 0, 0, 0.2); 
 
} 
 
.left .filledDiv .third:nth-child(2) { 
 
    background: rgba(0, 0, 0, 0.4); 
 
}

<div class="left"> 
 
    <div class="fixedBlock">fixed height</div> 
 
    <div class="filledDiv"> 
 
    <div class="third">dynamic height</div> 
 
    <div class="third">with children</div> 
 
    <div class="third">a third of its heigth</div> 
 
    </div> 
 
    <div class="fixedBlock">also fixed height</div> 
 

 
</div> 
 
<div class="right">right side - open me in full screen!</div>

Answer 3

所以，有點基礎，你就可以開始在上面工作。

爲固定高度，我用vh，它真的取決於你想支持哪些瀏覽器：vh support

否則，您可以使用父母或身體的height: 100%。

.left-bar { 
 
    width: 15%; 
 
    background-color: red; 
 
    float: left; 
 
    height: 100vh; 
 
    border-right: 5px solid black; 
 
} 
 

 
.right-window { 
 
    width: 85%; 
 
    float: left; 
 
    height: 100vh; 
 
    background-color: pink; 
 
    
 
} 
 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<div class="left-bar"> 
 
</div> 
 
<div class="right-window"> 
 
</div>

我想這是你想要的。但不知道。

這實現了完整的瀏覽器填充。

如果您發現寬度有calc()從邊框中移除5px，如果您願意，可以將其刪除並僅放置15%。

我想你只是想要一個基礎結構，這是一個非常簡單的結構，你必須愛我的顏色選擇技巧。

編輯：替換calc()加入box-sizing: border-box感謝@Paulie_D評論。