我没有做太多前端工作-我的问题是双重的，当高度设置为100％时，我的.row div越过viewport-我猜这与相对/固定topnav和侧边栏之间的位置互动？我该如何解决？滚动时如何使topbar保留在视口中？位置：固定会破坏格式。
我还必须给column2留一个左边距以阻止它在侧边栏后面滑动-这是最好的方法吗？
* {
box-sizing: border-box;
}
html {
height: 100%;
}
.row{
height: 100%;
}
.row:after {
content: "";
display: table;
clear: both;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.topnav{
background-color: whitesmoke;
color: rgb(91, 27, 143);
text-decoration: bold;
font-size: 12pt;
overflow: hidden;
height: 6%;
border-bottom: 2px solid #b338a9bb;
position: relative;
z-index: 2;
}
.column1 {
float: left;
width: 15%;
padding: 15px;
height: 100%; /* Full-height: remove this if you want "auto" height */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
background-color: lightgray; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
}
.column2 {
float: left;
width: 60%;
padding: 15px;
margin-left: 15%;
height: 100%;
}
.column3 {
float: left;
width: 25%;
padding: 15px;
border-left: 2px solid lightgray;
height: 100%;
}
.button{
background-color: #b338a9bb;
border: 2px solid #b338a9bb;
border-radius: 12px;
color: whitesmoke;
transition-duration: 0.4s;
display: inline-block;
padding: 8px 15px;
text-align: center;
text-decoration: none;
font-size: 20px;
width: 100px;
max-height: 50px;
}
.button:hover{
color: #424242;
background-color: whitesmoke;
border: 2px solid #b338a9bb;
}
.button:focus{
outline: 0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="topnav">
<div style="float: right;padding-right: 5px; padding-top: 10px;">
<button class="button" href="#">logout</button>
</div>
</div>
<div class="row">
<div class="column1">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column2">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column3">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
您应该将topnav的位置设置为固定
.topnav{
position: fixed;
}
然后，即使在滚动时它也将保留在原处。
答案 1 :(得分：0)
使用position: fixed;和width:100%和topnav
* {
box-sizing: border-box;
}
html {
height: 100%;
}
.row{
height: 100%;
}
.row:after {
content: "";
display: table;
clear: both;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.topnav{
background-color: whitesmoke;
color: rgb(91, 27, 143);
text-decoration: bold;
font-size: 12pt;
overflow: hidden;
height: 6%;
border-bottom: 2px solid #b338a9bb;
position: fixed;
z-index: 2;
width:100%
}
.column1 {
float: left;
width: 15%;
padding: 15px;
height: 100%; /* Full-height: remove this if you want "auto" height */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
background-color: lightgray; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
}
.column2 {
float: left;
width: 60%;
padding: 15px;
margin-left: 15%;
height: 100%;
}
.column3 {
float: left;
width: 25%;
padding: 15px;
border-left: 2px solid lightgray;
height: 100%;
}
.button{
background-color: #b338a9bb;
border: 2px solid #b338a9bb;
border-radius: 12px;
color: whitesmoke;
transition-duration: 0.4s;
display: inline-block;
padding: 8px 15px;
text-align: center;
text-decoration: none;
font-size: 20px;
width: 100px;
max-height: 50px;
}
.button:hover{
color: #424242;
background-color: whitesmoke;
border: 2px solid #b338a9bb;
}
.button:focus{
outline: 0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="topnav">
<div style="float: right;padding-right: 5px; padding-top: 10px;">
<button class="button" href="#">logout</button>
</div>
</div>
<div class="row">
<div class="column1">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column2">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column3">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
</div>
</body>
</html>
答案 2 :(得分：0)
我不建议在导航栏上使用百分比高度，而是使用：
position: fixed;
top: 0;
height: 60px;
width: 100%;
对于column2和column3使用：
height: 100vh;
margin-top: 60px; (to offset the height of the navbar)
答案 3 :(得分：0)
使用顶级导航的这些属性
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px; //or whatever you want