我正在尝试使用 float 和 clear 在没有常见网格系统的情况下设置页面样式。页面的宽度和高度都应使用完整视口(viewport)。下面的设置工作正常,除非我开始调整视口(viewport)的大小。移动视口(viewport)后,导航和内容部分突然开始重叠,内容呈现在导航下方。
当用户可能会调整视口(viewport)大小时,我的方法有问题吗?或者我不应该使用 vh
和 vw
吗?
设置应该非常简单:
- 高度为 40 像素的标题栏。
- 宽度为 20vw 的侧边导航部分
- 宽度为 80 vw 的内容部分 - 一些边距。
- 导航和内容部分应具有填充视口(viewport)的最小高度。
79.99vw
和 99.9vh
等尺寸的引入是为了避免任何舍入问题。我还分别尝试了 80vw
和 100vh
。
我的模板是这样的:
<div class="dashboard-wrapper">
<header class="header-bar">
<h1 class="bar-title">Brand Logo</h1>
<button class="logout-button">Log out</button>
</header>
<section class="side-bar">
<nav role="navigation" class="sidebar">
<ul>
<li>Navigation One</li>
<li>Navigation Two</li>
<li>Navigation Three</li>
<li>Navigation Four</li>
<li>Navigation Five</li>
</ul>
</nav>
</section>
<section class="content">
<h2>Lorem Ipsum</h2>
<p>Sed ut perspiciatis ...</p>
</section>
</div>
我的 CSS 看起来像这样:
.dashboard-wrapper {
margin-right: auto;
margin-left: auto;
}
.dashboard-wrapper header.header-bar {
float: top;
height: 40px;
}
.dashboard-wrapper header.header-bar h1 {
position: relative;
margin: 0 0 0 5px;
float: left;
}
.dashboard-wrapper header.header-bar button {
position: relative;
height: 40px;
width: 80px;
border: 0;
float: right;
}
.dashboard-wrapper section.side-bar {
float: left;
clear: left;
width: 20vw;
min-height: calc(99.9vh - 40px - 20px);
margin: 10px;
background: white;
}
.dashboard-wrapper section.content {
float: right;
clear: right;
position: relative;
width: calc(79.99vw - 30px);
min-height: calc(99.9vh - 40px - 20px);
margin: 10px 10px 10px 0;
background: white;
}
到目前为止,这仅在 Windows 上的 Chrome 中进行了测试。
最佳答案
- 删除了无效的
float:top
, - 添加了 clearfix 类:
.cf
以清除float
- 添加了
box-sizing:border-box
以防万一您可能会使用padding
- 将
width
切换为%
单位的vw
单位,以便在使用calc
时获得四舍五入的值并保持一致跨设备的结果。 - 一些其他的小东西。
* {
box-sizing: border-box
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
body {
margin: 0;
}
.dashboard-wrapper header.header-bar {
height: 40px;
/*demo*/
background: green
}
.dashboard-wrapper header.header-bar h1 {
margin: 0 0 0 5px;
float: left;
}
.dashboard-wrapper header.header-bar button {
height: 40px;
width: 80px;
border: 0;
float: right;
}
.dashboard-wrapper section.side-bar {
float: left;
width: 20%;
min-height: calc(100vh - 60px);
margin: 10px;
background: red;
}
.dashboard-wrapper section.content {
float: left;
width: calc(80% - 30px);
min-height: calc(100vh - 60px);
margin: 10px 10px 10px 0;
background: lightblue;
}
footer {
background:orange;
width:100%
}
<div class="dashboard-wrapper">
<header class="header-bar cf">
<h1 class="bar-title">Brand Logo</h1>
<button class="logout-button">Log out</button>
</header>
<div class="main-wrapper cf">
<section class="side-bar">
<nav role="navigation" class="sidebar">
<ul>
<li>Navigation One</li>
<li>Navigation Two</li>
<li>Navigation Three</li>
<li>Navigation Four</li>
<li>Navigation Five</li>
</ul>
</nav>
</section>
<section class="content">
<h2>Lorem Ipsum</h2>
<p>Sed ut perspiciatis ...</p>
</section>
</div>
<footer>
Lorem Ipsum ed ut perspiciatis ...
</footer>
</div>
关于css - float/clear 突然溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35613529/