编辑：感谢你们真棒的人们，网页看起来真棒！ 我无法选择最佳答案，因为他们都帮助了我很多：p 如果有人对http://i.imgur.com/RABpT9u.png
感兴趣，那么这就是结果我试图创建一个带有网站的简单网站＆＃34; logo＆＃34;在顶部，左侧是导航栏，中间是内容，底部是一些页脚。
与此同时，我试图让它变得敏感，这显然不适合我：D
我对html和css很陌生，所以任何建议都会有所帮助！
* { box-sizing: border-box;}
body { padding: 0; margin: 0; height:100%; }
header {
height:100%;
border:0.5vw ridge #888;
background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);
text-align: center;
font-size: 1.4vw;
}
header h1,h2 {
color:#DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main {
position: absolute;
display: flex;
width:100%;
max-height:100%;
background-color:#DDD;
border: 2px solid #F0F;
}
nav {
position: relative;
display:block;
overflow:auto;
z-index: 0;
float:left;
height:100%;
background: linear-gradient(90deg,#5BF,#29E);
border:0.5vw ridge #888;
max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
display:block;
width:100%;
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border:0.2vw outset white;
border-radius:0.5vw;
background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
margin:0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration:none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
position: relative;
display: inline;
float:left;
z-index: 0;
max-width:100%;
background-color:grey;
border: 2px solid green;
}
footer {
width:100%;
margin-top:auto;
border: 2px dashed red;
}<!doctype html>
<html lang="en">
<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li><a href="link">LinkToHome</a>
<li><a href="link">link1</a></li>
<li><a href="link">link2</a></li>
<li><a href="link">longlink3</a></li>
<li><a href="link">aboutlink</a></li>
</ul>
</nav>
<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>
<footer>
<h1>footer</h1>
</footer>
</main>
</body>
</html>
答案 0 :(得分：4)
你可以尝试使用;
width:100vw;
* { box-sizing: border-box;}
body { padding: 0; margin: 0; height:100%; }
header {
height:100%;
border:0.5vw ridge #888;
background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);
text-align: center;
font-size: 1.4vw;
}
header h1,h2 {
color:#DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main {
position: absolute;
display: flex;
width:100%;
max-height:100%;
background-color:#DDD;
border: 2px solid #F0F;
}
nav {
position: relative;
display:block;
overflow:auto;
z-index: 0;
float:left;
height:100%;
background: linear-gradient(90deg,#5BF,#29E);
border:0.5vw ridge #888;
max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
display:block;
width:100%;
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border:0.2vw outset white;
border-radius:0.5vw;
background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
margin:0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration:none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
position: relative;
display: inline;
float:left;
z-index: 0;
background-color:grey;
border: 2px solid green;
width:86vw;
}
footer {
position: absolute;
width:100%;
border: 2px dashed red;
bottom:0;
}<!doctype html>
<html lang="en">
<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li><a href="link">LinkToHome</a>
<li><a href="link">link1</a></li>
<li><a href="link">link2</a></li>
<li><a href="link">longlink3</a></li>
<li><a href="link">aboutlink</a></li>
</ul>
</nav>
<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>
</main>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
答案 1 :(得分：3)
我不确定这是否正是您正在寻找的，但您是否尝试过使用flex属性？
尝试查看此处，看看这是否是您正在寻找的https://jsfiddle.net/jg2sjrL5/4/
<div id="container">
<div id="navigation">navigation</div>
<div id="content"></p>content</p></p>content</p></p>content</p>
</p>content</p></div>
</div>
<div id="footer">footer</div>
html, body {width: 100vw, height: 100vh}
#container {
display:flex;
align-items: center;
flex-direction:row;}
#main, #footer {
width: 100vw;
}
#main{
display: flex;
flex-direction: row;
}
#content {
background-color:red;
width: 80vw;
}
#navigation {
background-color:white;
width: 20vw;
}
#footer {
background-color:green;
}
你最终可以用vh设置不同元素的高度，使它们适合你的页面
答案 2 :(得分：1)
这是一些指导。希望它有所帮助。
html {
box-sizing: border-box; /* 1 */
height: 100%; /* 2 */
}
*, *:before, *:after {
box-sizing: inherit; /* 1 */
}
body {
margin: 0; /* 3 */
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
border: 0.5vw ridge #888;
background: linear-gradient(to right, #123, #368, #48A, #59B, #48A, #368, #123);
text-align: center;
font-size: 1.4vw;
}
header h1, h2 {
color: #DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main { /* 4 */
flex: 1; /* consume remaining space in column */
display: flex;
background-color: #DDD;
border: 2px solid #F0F;
}
nav {
background: linear-gradient(90deg, #5BF, #29E);
border: 0.5vw ridge #888;
}
nav ul {
margin: 0;
padding: 0.5vw;
list-style-type: none;
}
nav li {
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border: 0.2vw outset white;
border-radius: 0.5vw;
background: linear-gradient(180deg, #AAA 60%, #777);
}
nav a {
margin: 0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration: none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
flex: 1; /* consume remaining space in row */
background-color: grey;
border: 2px solid green;
}
footer {
border: 2px dashed red;
}<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li><a href="link">LinkToHome</a></li>
<li><a href="link">link1</a></li>
<li><a href="link">link2</a></li>
<li><a href="link">longlink3</a></li>
<li><a href="link">aboutlink</a></li>
</ul>
</nav>
<div id="content">
<h1>Content Content Content</h1>
<h1>Content Content Content</h1>
</div>
</main>
<footer>
<h1>footer</h1>
</footer>
请注意，在原始代码中，您使用了CSS定位和浮点数以及HTML <center>元素。当您拥有flexbox时，您不需要position: absolute，position: relative或float: left来使此布局正常工作。并且the <center> element is being phased out。你不应该使用它而你不需要它。