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

-2

正如我在标题中所述，我正在尝试制作网站，但您无法向下滚动或显示某些内容，因此应覆盖整个网页。不溢出并具有100％高度/宽度的网页

下面是一个例子，

我想这样做，但每当我设置的高度和宽度100％它似乎并没有工作，它总是让超过100％溢出包装里面的内容。

编辑：也使一切等于100％高度/宽度不起作用，因为我使用边框和像素。

来源

2017-04-07 Martijn Ebbens

请张贴代码 – mayersdesign

我会用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; 
}

完全codepen例如：http://codepen.io/StefanBobrowski/pen/zZXXWy

来源

2017-04-07 15:52:52 StefanBob

嗯，该页面似乎不能在codepen上工作。 –

对不起，请再试一次链接 – StefanBob

http://imgur.com/a/P3L4R –

使用

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>

来源

2017-04-07 15:43:48 Vivick

有时候，我只需要使用像素，百分比别永远不会工作，但这真的是最好的方式吗？我应该能够在一定程度上自动做到这一点，而不必一直认为它是否等于100％。 –

使用'vw'和'vh'这些可靠的响应。 – Vivick

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

回答

相关问题