正如我在标题中所述,我试图建立一个网站,你不能向下滚动或者什么,它应该涵盖整个网页。
我尝试过这样做,但每当我将高度和宽度设置为100%时,它似乎不起作用,它总是使包装内的内容超过100%溢出。
编辑:由于我使用了border和px,所以所有内容都等于100%的高度/宽度并不起作用。
答案 0 :(得分:2)
使用
body{
width:100vw;
height:100vh;
overflow:hidden;
}
(不要忘记先使用重置表)
如果您使用px
(我不推荐使用),您可以使用CSS calc()
函数来调整大小(例如)width: calc((100vw - 900px) / 2)
修改
其他一切:
CSS
div#header/*or simply the HTML header*/{
width:100vw;
height:/*something here that I'll call Hh for calculuses (less than 100vh)*/;
float:left;
}
div.sidebar{
width:/*something i'll call SBw for calculuses (less than 50vw)*/;
height:calc(100vh - Hh - Fh);
}
div#main{
width:calc(100vw - SBw - SBw);
height:calc(100vh - Hh - Fh);
}
div#footer/*or simply the HTML footer*/{
width:100vw;
height:/*something I'll call Fh*/;
}
和HTML
<body>
<div id="header"></div>
<div class="sidebar" id="Sidebar1"></div>
<div id="main"></div>
<div class="sidebar" id="Sidebar2"></div>
<div id="footer"></div>
</body>
答案 1 :(得分:1)
我会使用flexbox粘性页脚技术。 100vh使它始终是屏幕的高度,然后flexbox魔术照顾其余部分,使其无论屏幕尺寸如何都始终适合。看看:
<强> HTML 强>
<body>
<header></header>
<main class="content">
<section class="left-side"></section>
<section class="right-side"></section>
</main>
<footer></footer>
</body>
<强> CSS 强>
body {
display: flex;
min-height: 100vh;
padding: 0;
margin: 0;
flex-direction: column;
background-color: red;
}
header {
height: 50px;
background-color: green;
}
main.content {
display: flex;
justify-content: space-between;
flex: 1 0 auto;
background-color: yellow;
}
.left-side, .right-side {
display: block;
height: auto;
width: 20%;
background-color: orange;
}
footer {
height: 50px;
background-color: blue;
}