Heim > Artikel > Web-Frontend > Beispielcode zum Festlegen einer bildschirmfüllenden Webseite mithilfe von CSS
Beispielcode zum Festlegen einer bildschirmfüllenden Webseite mithilfe von CSS
- 零下一度Original
- 2017-04-21 17:12:452120Durchsuche
Dieser Artikel verwendet CSS, um die Webseite so einzustellen, dass sie 100 % hoch, 100 % breit und 100 % voll ist. Sie können einen Blick darauf werfen, es ist ziemlich gut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css设置网页高100%宽100%占满屏幕</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
*{
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
min-height: 100%;
_height:100%;
height:100%;
}
body {
min-height: 100%;
_height:100%;
height:100%;
/*background: #ff0000;*/
}
#all {
background: #EEE;
border-left: 1px solid #ff0000;
border-right: 1px solid #ff0000;
padding: 0 20px 0 20px;
margin: auto;
font: 1.5em arial, verdana, sans-serif;
width: 100%;
min-height: 100%;
_height:100%;
}
#header,#pagefooter,#container {
margin: 0 auto;
width: 85%;
border: 1px solid #000000;
}
#content {
float: right;
width: 66%;
border: 1px solid green;
}
#side {
float: left;
width: 33%;
border: 1px solid blue;
}
.clearfix::before {
content: "";
display: table;
width: 0;
height: 0;
overflow: hidden;
}
.clearfix::after {
content: "";
clear: both;
display: table;
width: 0;
height: 0;
overflow: hidden;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<p id="all">
<p id="header">
头部
</p>
<p id="container" class="clearfix">
<p id="content">中部内容</p>
<p id="side">中部侧边</p>
</p>
<p id="pagefooter">
我是底部
</p>
</p>
</body>
</html>Studenten, die es brauchen Um CSS zu lernen, achten Sie bitte auf die chinesische PHP-Website CSS-Video-Tutorial . Viele CSS-Online-Video-Tutorials können kostenlos angesehen werden!
Das obige ist der detaillierte Inhalt vonBeispielcode zum Festlegen einer bildschirmfüllenden Webseite mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Beispiele für Vertical-Align-Attribute in CSSNächster Artikel：Detaillierte Erläuterung der Beispiele für Vertical-Align-Attribute in CSS