Question

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

这是一个例子，

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

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

Answer 1

使用

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>

Answer 2

我会使用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

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

2 个答案: