我想實作一個特定的布局，但是當我嘗試這樣做時，一切都亂了套。我想要像這張照片一樣。任何人都可以幫忙嗎？
body {
margin: 0px;
}
.top {
width: 100%;
background-color: blue;
height: 40px;
color: white;
}
.content {
margin-left: 100px;
height: 100%;
}
.sidebar {
width: 100px;
position: fixed;
height: 100%;
background-color: red;
}
.footer {
height: 40px;
width: 100%;
background-color: black;
}<div class="sidebar"></div>
<div class="content">
<div class="top">My website example</div>
<p>I start here</p>
</div>
<div class="footer"></div>uj5u.com熱心網友回復：
好吧，您只在頁腳上遺漏了一些東西。如果您希望它位于特定位置，您應該使用position: absoluteor position: fixed，就像您在sidebar. 并插入一個bottom: 0, 表示您希望它在底部，而不是在頂部或右/左。
body {
margin: 0px;
}
.top {
width: 100%;
background-color: blue;
height: 40px;
color: white;
}
.content {
margin-left: 100px;
height: 100%;
}
.sidebar {
width: 100px;
position: fixed;
height: 100%;
background-color: red;
}
.footer {
height: 40px;
width: 100%;
background-color: black;
position: absolute;
bottom: 0;
}<div class="sidebar"></div>
<div class="content">
<div class="top">My website example</div>
<p>
I start here
</p>
</div>
<div class="footer"></div>uj5u.com熱心網友回復：
使用彈性盒
<section>
<div class="sidebar">
</div>
<div class="content">
<div class="top">My website example</div>
<p>
I start here
</p>
</div>
</section>
<div class="footer"></div>
section {
display: flex;
height:100vh;
}
.sidebar {
width: 100px;
background-color: red;
}
.content{
width:100%;
}
.top {
background-color: blue;
height: 40px;
color: white;
}
.footer {
height: 40px;
width: 100%;
background-color: black;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486795.html