根據窗口大小變化的行高比例

您好我是web開發新手，在Codecademy中通過Bootstrap學習CSS。根據窗口大小變化的行高比例

我有3個組件在body，我想根據窗口大小在那裏設置height。

header {height:15%;} 
main {height:75%;} 
footer {height:10%;}

我知道如何處理列而不是行。謝謝。

來源

2015-05-30 useR

如果父元素有–和<html>和<body>元素有–定義的100%高度，那麼你可以使用相同的百分比在CSS元素：

html, body { 
 
    height: 100%; 
 
} 
 
.header { 
 
    height: 15%; 
 
    background-color: red; 
 
} 
 

 
.main { 
 
    height: 75%; 
 
    background-color: green; 
 
} 
 

 
.footer { 
 
    height: 10%; 
 
    background-color: blue; 
 
}

<div class="header"></div> 
 
<div class="main"></div> 
 
<div class="footer"></div>

當然，這將導致垂直滾動，如果有任何填充或邊緣集（甚至默認情況下）上的任何這些元素的;所以他們應該設置爲0：

html, body, div { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 
.header { 
 
    height: 15%; 
 
    background-color: red; 
 
} 
 

 
.main { 
 
    height: 75%; 
 
    background-color: green; 
 
} 
 

 
.footer { 
 
    height: 10%; 
 
    background-color: blue; 
 
}

<div class="header"></div> 
 
<div class="main"></div> 
 
<div class="footer"></div>

或者，而不是用百分比單位，你可以改用vh; 1vh等於視口高度的1%;這樣就不必設置height: 100%在<html>和<body>元素：

.header { 
 
    height: 15vh; 
 
    background-color: red; 
 
} 
 

 
.main { 
 
    height: 75vh; 
 
    background-color: green; 
 
} 
 

 
.footer { 
 
    height: 10vh; 
 
    background-color: blue; 
 
}

<div class="header"></div> 
 
<div class="main"></div> 
 
<div class="footer"></div>

但是，當然，因爲padding和margin這仍然導致滾動條，所以設置那些0 & ndash的再次–仍然需要：

html, body, div { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.header { 
 
    height: 15vh; 
 
    background-color: red; 
 
} 
 

 
.main { 
 
    height: 75vh; 
 
    background-color: green; 
 
} 
 

 
.footer { 
 
    height: 10vh; 
 
    background-color: blue; 
 
}

<div class="header"></div> 
 
<div class="main"></div> 
 
<div class="footer"></div>

，或雖margin仍然需要明確地設置爲0，你可能會迫使瀏覽器設置box-sizing到border-box包括的元素的高度/寬度計算中的任何padding。

這解決了通常計算元素的高度/寬度然後通過任何填充和任何邊框增加的問題。border-box強制瀏覽器設置元素的高度，或寬度，包括邊界的大小和填充：

html, body, div { 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.header { 
 
    height: 15vh; 
 
    background-color: red; 
 
} 
 

 
.main { 
 
    height: 75vh; 
 
    background-color: green; 
 
} 
 

 
.footer { 
 
    height: 10vh; 
 
    background-color: blue; 
 
}

<div class="header"></div> 
 
<div class="main"></div> 
 
<div class="footer"></div>

參考文獻：

box-sizing^{compatibility，specification}。
CSS Values and Units Module, Level 3。

來源

2015-05-30 13:47:08

你可以嘗試這樣的：

body { 
 
\t width: 36%; 
 
\t margin: 8px auto; 
 
} 
 

 
div.wrapper { 
 
\t width: 100%; 
 
\t padding-bottom: 56.25%; 
 
\t position: relative; 
 

 
\t background: red; 
 
} 
 

 
div.wrapper > div { 
 
\t position: absolute; 
 
\t top: 0; bottom: 0; left: 0; right: 0; 
 

 
\t color: white; 
 
\t font-size: 24px; 
 
\t text-align: center; 
 
}

<div class="wrapper"><div>See in fullscreen mode</div></div>

來源

2015-05-30 13:42:38

我認爲這只是缺少對父母，這是body和html標籤height。

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
header { 
 
    height: 15%; 
 
} 
 
main { 
 
    height: 75%; 
 
} 
 
footer { 
 
    height: 10%; 
 
}

<header>header</header> 
 
<main>main</main> 
 
<footer>footer</footer>

或者，你可以使用視窗單位。

body { 
 
    margin: 0; 
 
} 
 
header { 
 
    height: 15vh; 
 
} 
 
main { 
 
    height: 75vh; 
 
} 
 
footer { 
 
    height: 10vh; 
 
}

<header>header</header> 
 
<main>main</main> 
 
<footer>footer</footer>

來源

2015-05-30 13:47:28 Stickers

根據窗口大小變化的行高比例

回答

相關問題