不溢出並具有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％高度/寬度的網頁

回答

相關問題