好像我今天在CSS上有点生疏了。搜索stackoverflow,但大多数类似的问题没有任何好的答案。
在提供的代码中,我想在#content
div中添加侧边栏。即使内容中没有文字,我也希望页脚粘在底部。
请注意,我不想要一个position:fixed;
页脚。如果页面上没有文字,只是一个保持在底部的页脚。
我尝试使用float
属性创建侧边栏,但这会导致页脚不会粘到底部。
我怎样才能划分"将内容分成两个div,并将其中一个作为左侧边栏。
答案 0 :(得分:1)
我将HTML结构包装如下:
<header>
<h1>Header</h1>
</header>
<main>
<nav>
<p>Sidebar</p>
</nav>
<content>
<p>Content</p>
</content>
<footer>
<p>Footer</p>
</footer>
</main>
CSS:
html,
body {
margin:0;
padding:0;
height:100vh;
}
header {
background: LightSlateGray;
max-height: 10vh;
padding:10px;
}
header h1 {
margin:0;
padding:10px 0 0 10px;
}
main { height: 90vh; max-height: 90vh; }
nav, content, footer { display: inline-block; float: left; }
content, footer { width: 80%; }
nav { width: 20%; height: 100%; background-color: #ff9090; }
content { height: calc(100% - 200px); max-height: calc(100% - 200px); overflow: auto; }
footer {
height:200px; /* Height of the footer */
background:#6cf;
}
footer p {
margin:0;
padding:10px;
}
演示链接https://jsfiddle.net/fzj5gLe6/2/
内容文字未填写页面的演示链接:https://jsfiddle.net/fzj5gLe6/3/
修订后的CSS,部分max-height
更改为min-height
,为了让页脚贴在底部,添加height: auto;
以生成min-height
content
工作,演示链接:https://jsfiddle.net/fzj5gLe6/5/
html,
body {
margin:0;
padding:0;
height:100vh;
}
header {
background: LightSlateGray;
min-height: 10vh;
padding:10px;
}
header h1 {
margin:0;
padding:10px 0 0 10px;
}
main { height: 0; min-height: 90vh; }
nav, content, footer { display: inline-block; float: left; }
content, footer { width: 80%; }
nav { min-height: 100%; width: 20%; }
content { height: auto; min-height: calc(100% - 200px); }
footer {
height:200px; /* Height of the footer */
background:#6cf;
float: right;
}
footer p {
margin:0;
padding:10px;
}
要允许nav
元素填充高度,我已将position: relative;
附加到main
元素,并添加了clearfix修复程序以允许main
在元素内获得正确的高度。 (也height: auto;
)
main { position: relative; height: auto; }
main:before, main:after { display: table; content: ''; }
main:after { clear: both; }
之后我修改了nav
元素的样式,如下所示,使其填充父母的身高
nav {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 20%;
background:lightgreen;
float: left;
}
最后,我将content
和footer
元素设为float: right;
以完成布局。
content, footer { float: right; }