这是html代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tela Cheia no CSS</title>
<link href="Styles 02B.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="cabecalho"></div>
<div id="conteudo">
<p>Texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
</div>
<div id="rodape"></div>
</body>
</html>
这是CSS代码:
body {
margin: 90px 0px 0px 0px;
padding: 0;
background-color: #FFF501;
border: thick solid #FF0B0F;
}
#cabecalho {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
background-color: #2A00FF;
border: thick solid #49FF00;
height: 90px;
z-index: 2;
}
#conteudo {
position: fixed;
top: auto;
left: 0;
width: 100%;
padding: 0;
background-color: #F108D3;
border: thick solid #FFBE00;
height: 100%;
z-index: 2;
overflow-y: auto;
overflow-x: auto;
}
#rodape {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 0;
background-color: #2A00FF;
border: thick solid #49FF00;
height: 45px;
z-index: 2;
}
我正是想要这个，但有一点不同:屏幕尺寸内的孔页眉(以及页脚和内容)，包括边框。请注意，右侧的边框在屏幕外，我需要在屏幕内。就是这样。
如果你们中有人知道如何得到它，请帮助我。非常感谢您的帮助。
提前致谢。
最佳答案
只需添加*{box-sizing: border-box}
*{box-sizing: border-box}
body {
margin: 90px 0px 0px 0px;
padding: 0;
background-color: #FFF501;
border: thick solid #FF0B0F;
}
#cabecalho {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
background-color: #2A00FF;
border: thick solid #49FF00;
height: 90px;
z-index: 2;
}
#conteudo {
position: fixed;
top: 90px; /*add this it is the height of #cabecalho*/
left: 0;
bottom: 50px; /*add this it is the height of #rodape*/
width: 100%;
padding: 0;
background-color: #F108D3;
border: thick solid #FFBE00;
z-index: 2;
overflow-y: auto;
overflow-x: auto;
}
#rodape {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 0;
background-color: #2A00FF;
border: thick solid #49FF00;
height: 45px;
z-index: 2;
} <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tela Cheia no CSS</title>
<link href="Styles 02B.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="cabecalho"></div>
<div id="conteudo">
<p>Texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo, texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
<p>Texto de exemplo...</p>
</div>
<div id="rodape"></div>
</body>
</html>关于html - 如何将 Div 精确限制为屏幕大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27550116/