网页没有溢出并且具有100%的高度/宽度

时间:2017-04-07 15:40:10

标签: html css

正如我在标题中所述,我试图建立一个网站,你不能向下滚动或者什么,它应该涵盖整个网页。

这是一个例子, enter image description here

我尝试过这样做,但每当我将高度和宽度设置为100%时,它似乎不起作用,它总是使包装内的内容超过100%溢出。

编辑:由于我使用了border和px,所以所有内容都等于100%的高度/宽度并不起作用。

2 个答案:

答案 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;
}

完整的代码集示例:http://codepen.io/StefanBobrowski/pen/zZXXWy