[英]CSS element doesn't cover 100% of the page
首先,這是大學的任務,盡管看起來很基本,但我一直在嘗試解決最近3個小時的問題,但似乎沒有任何效果。
因此,我將側面導航欄設置為height: 100;
但是,它沒有明顯的原因接近頁面底部。 調整窗口大小足以將導航欄推過頁腳,這使頁腳懸在頁面上最后一個元素的正下方
HTML:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 850px)" href="css/style2.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 450px)" href="css/style3.css" />
<!-- <script src="js/main.js"></script> -->
<title>CS15020: Web Development Tools</title>
</head>
<body>
<header class="text element-color">
<h1>David’s assignment 2 for CS15020</h1>
</header>
<nav>
<a href="">Email me</a><br />
<a href="prac2.html">My CV (no CSS)</a><br />
<a href="prac2_centered.html">My CV (with CSS)</a><br />
<a href="..">Homepage</a><br />
<a href="" target="_blank">My website</a><br />
<br /> <!-- dirty way of making media queries work -->
<a href="http://validator.w3.org/check?uri=referer">Valid HTML5</a><br />
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
</nav>
<main>
<br />
Please enter your details below:
<form id="userDetails" action="/">
<p>
<input type="text" id="users_name" placeholder="Name" />
<br />
<select name="grade">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="button" name="send" onclick="process()" value="Submit" />
</form>
<p id="out"></p>
<img src="images/web.jpg" alt="web image"></img>
<p id="dateModified"></p>
<script>
function process() {
var txt = "";
var hoursOut = "";
var name = document.getElementById("users_name").value;
switch(document.forms['userDetails'].grade.selectedIndex){
case 0:
txt="1/5 (20%); Wow you must really suck at life...";
break;
case 1:
txt="2/5 (40%); Meh...";
break;
case 2:
txt="3/5 (60%); Well... at least you know something, right?";
break;
case 3:
txt="4/5 (80%); It's getting good!";
break;
case 4:
txt="5/5 (100%); Awesome bro, keep it goin'!";
break;
}
var hours = (new Date()).getHours();
if (hours >= 12 && hours < 18) {
hoursOut = "afternoon";
} else if (hours < 12 && hours >= 5) {
hoursOut = "morning";
} else if (hours >= 18 && hours <= 23) {
hoursOut = "evening";
} else hoursOut = "night";
var finalOut = document.getElementById("out");
finalOut.innerHTML = "Good " + hoursOut + ", " + name + "! You expected grade " + txt;
}
var mod = new Date(document.lastModified);
var modFormatted = mod.toLocaleString();
document.getElementById("dateModified").innerHTML = "Last modified: " + modFormatted;
</script>
</main>
<div id="footer" class="text element-color">
CS15020 - WEB DEVELOPMENT TOOLS
</div>
</body>
CSS:
main {
margin-left: 15%;
min-height:100%;
margin-bottom: 1%;
overflow: hidden;
}
body
{
margin: 0;
background-color: #F8E0E0;
}
.text {
font-family: Arial, Helvetica, sans-serif;
}
.element-color {
color: #818181;
}
header {
background-color: #111;
width: 100%;
}
header h1 {
margin: 0;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 5px;
}
nav {
position: absolute;
display: block;
padding-top: 5px;
padding-left: 0;
width: 12%;
height: 100%;
background-color: #111;
border-top: 2px solid #818181;
}
nav a {
text-decoration: none;
color: #818181;
padding: 6px 8px 6px 16px;
}
nav a:hover{
color: white;
}
img {
max-width: 100%;
height: auto;
}
#footer {
width: 100%;
position: relative;
bottom: 0;
text-align: center;
margin: 0;
background-color: #111;
color: #818181;
}
CSS#2:
main {
margin-left: 140px;
margin-bottom: 1%;
overflow: hidden;
}
body
{
margin:0;
background-color: #F8E0E0;
}
.text {
font-family: Arial, Helvetica, sans-serif;
}
.element-color {
color: #818181;
}
header {
background-color: #111;
width: 100%;
/*border-bottom: 2px solid white;*/
}
header h1 {
margin: 0;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 5px;
font-size: 100%;
}
nav {
position: absolute;
padding-top: 5px;
padding-left: 0%;
width: 16%;
height: 100%;
background-color: #111;
border-top: 2px solid #818181;
}
nav a {
text-decoration: none;
font-size: 85%;
color: #818181;
padding: 6px 8px 6px 16px;
}
nav a:hover{
color: white;
}
img {
max-width: 100%;
height: auto;
}
#footer {
width: 100%;
position: relative;
bottom: 0;
text-align: center;
margin: 0;
background-color: #111;
color: #818181;
}
CSS#3:
main {
z-index: 1;
margin-left: 5%;
padding-top: 15%;
margin-bottom: 1%;
overflow: hidden;
}
body
{
margin:0;
background-color: #F8E0E0;
}
.text {
font-family: Arial, Helvetica, sans-serif;
}
.element-color {
color: #818181;
}
header {
background-color: #111;
/*border-bottom: 2px solid white;*/
}
header h1 {
margin: 0;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 5px;
font-size: 100%;
}
nav {
z-index: 2;
position: fixed;
overflow: hidden;
display: block;
padding-bottom: 5px;
width: 100%;
height: auto;
border-top: 2px solid #818181;
}
nav a {
text-decoration: none;
font-size: 85%;
/*color: #818181;*/
padding: 6px 8px 6px 16px;
}
br {
display: none;
}
nav a:hover{
color: white;
}
img {
max-width: 100%;
height: auto;
}
#footer {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
margin: 0;
background-color: #111;
color: #818181;
}
CSS工作表#2和#3,僅用於媒體查詢
更新:您實際上可以在這里看到整個內容; 我現在將高度更改為固定。
通過Flex解決了可滾動內容的問題。
.outer { display: flex; } .nav { flex: 1; background: black; } .main { flex: 4; } main { margin-left: 15%; min-height: 100%; margin-bottom: 1%; overflow: hidden; } body { margin: 0; background-color: #F8E0E0; } .text { font-family: Arial, Helvetica, sans-serif; } .element-color { color: #818181; } header { background-color: #111; width: 100%; height: 40px; } header h1 { margin: 0; padding-top: 2px; padding-bottom: 4px; padding-left: 5px; } nav a { text-decoration: none; color: #818181; } nav a:hover { color: white; } img { max-width: 100%; height: auto; } #footer { width: 100%; bottom: 0; text-align: center; margin: 0; background-color: #111; color: #818181; }
<body> <header class="text element-color"> <h1>David's assignment 2 for CS15020</h1> </header> <div class="outer"> <div class="nav"> <nav> <a href="">Email me</a><br /> <a href="prac2.html">My CV (no CSS)</a><br /> <a href="prac2_centered.html">My CV (with CSS)</a><br /> <a href="..">Homepage</a><br /> <a href="" target="_blank">My website</a><br /> <br /> <!-- dirty way of making media queries work --> <a href="http://validator.w3.org/check?uri=referer">Valid HTML5</a><br /> <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a> </nav> </div> <div class="main"> <main> <br /> Please enter your details below: <form id="userDetails" action="/"> <p> <input type="text" id="users_name" placeholder="Name" /> <br /> <select name="grade"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <input type="button" name="send" onclick="process()" value="Submit" /> </form> <p id="out"></p> <img src="images/web.jpg" alt="web image"> <p id="dateModified"></p> <br /> Please enter your details below: <form id="userDetails" action="/"> <p> <input type="text" id="users_name" placeholder="Name" /> <br /> <select name="grade"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <input type="button" name="send" onclick="process()" value="Submit" /> </form> <p id="out"></p> <img src="images/web.jpg" alt="web image"> <p id="dateModified"></p> <br /> Please enter your details below: <form id="userDetails" action="/"> <p> <input type="text" id="users_name" placeholder="Name" /> <br /> <select name="grade"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <input type="button" name="send" onclick="process()" value="Submit" /> </form> <p id="out"></p> <img src="images/web.jpg" alt="web image"> <p id="dateModified"></p> <br /> Please enter your details below: <form id="userDetails" action="/"> <p> <input type="text" id="users_name" placeholder="Name" /> <br /> <select name="grade"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <input type="button" name="send" onclick="process()" value="Submit" /> </form> <p id="out"></p> <img src="images/web.jpg" alt="web image"> <p id="dateModified"></p> <br /> Please enter your details below: <form id="userDetails" action="/"> <p> <input type="text" id="users_name" placeholder="Name" /> <br /> <select name="grade"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <input type="button" name="send" onclick="process()" value="Submit" /> </form> <p id="out"></p> <img src="images/web.jpg" alt="web image" /> <p id="dateModified"></p> </main> </div> </div> <div id="footer" class="text element-color"> CS15020 - WEB DEVELOPMENT TOOLS </div> </body>
嘗試在CSS中將nav's
位置從absolute
位置更改為fixed
位置(第一個)。 它為我工作。
EDITED
header {
background-color: #111;
width: 100%;
position: fixed;
}
nav {
position: fixed;
display: block;
padding-top: 5px;
padding-left: 0;
width: 12%;
height: 100%;
margin-top: 42px;
background-color: #111;
border-top: 2px solid #818181;
}
如果存在其他因素,固定位置可能會更好,盡管這可能不適用於您想要的最終產品。
兼容性不是很好,但是您可以嘗試將高度設置為100vh。 這會將其設置為用戶視口的100 1/100,即整個屏幕的視口。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.