1

コーディングするたびに、この問題が発生し続けます。

高さを 100% に設定しました。下部の 300px の余白を除いて、どのくらいの情報が含まれていても、div がページの下部に到達するようにします。

現在、私はまだ下部に余白を設定していません。

ご覧のとおり、ページの一番下まで届かず、私も欲しいです。私の画面はかなり大きいので、あなたのコンピュータはそうかもしれません。

DIV は「ラッパー」と呼ばれます。

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Design At Ease - Home</title>
</head>
<body>
<div id="header">
<div id="logo"><a class="logoclass">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li><a href="index.html">Home</a></li>
<li><a href="coding.html">Coding</a></li>
<li><a href="graphics.html">Graphics</a></li>
<li><a href="database.html">Database</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="more.html">More</a></li>
</ul>
</div>
<ul id="quicklinks">
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="photoshop.html">Photoshop</a></li>
</ul>
<div id="wrapper"></div>
</body>
</html>

CSS

body{
background:#fffffc;
margin: auto auto;
}

#header{
background:#e5e5e5;
height:35px;
width:100%;
border-bottom: 1px #c9c9c9 solid;
}

#headerlinks{
position:relative;
display:inline;
float:right;
margin-right:5%;
bottom:37px;
}

#headerlinks li{
display:inline;
padding-left:25px;
}

#headerlinks li a{
color:#777777;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}

#headerlinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}


#headerlinks li a:active{
color:#00B2EE;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}


#logo{
position:relative;
color:black;
margin-left:5%;
top:5px;
}

.logoclass{
color:#212121;
display:inline;
font-size:24px;
font-family: sans-serif;
text-decoration:none;
}

#quicklinks{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
background:#e5e5e5;
border-bottom: 1px #c9c9c9 solid;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
top:-46px;
position:relative;
clear: right;
}

#quicklinks li{
position:relative;
top:2px;
display:inline;
padding-right:20px;
}

#quicklinks li a{
color:#777777;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}

#quicklinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}

#quicklinks li a:active{
color:#00B2EE;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}


#wrapper{
position:relative;
top:-62px;
margin-left: auto;
margin-right: auto;
width:90%;
height:100%;
background:#fafafa;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
}
4

4 に答える 4

0

私の経験では、JavaScript ソリューションを採用することで、さまざまな一般的なブラウザーで最高の成功を収めることができます。jQuery を使用して生活を少し楽にすることを強くお勧めします。次に、基本的に #wrapper DIV を、本体の高さから #header と #quicklinks を引いた値に等しく設定できます。次のようになります。

var windowHeight = $(window).height();
var headerHeight = $('#header').outerHeight(false);
var linksHeight = $('#quicklinks').outerHeight(false);
var wrapperHeight = windowHeight - (headerHeight + linksHeight);

$('#wrapper').css('min-height', wrapperHeight);

注: #wrapper DIV のコンテンツが実際には既に画面の下部にプッシュされている可能性があるため、min-height を使用しています。

手早く汚い例については、このフィドルを参照してください: http://jsfiddle.net/HLJJc/

于 2013-06-27T23:16:14.300 に答える
0

高さ 100% を使用すると、コンテナーの 100% の高さが使用されるため、body と html も高さ 100% に設定する必要があります。

于 2013-06-27T23:08:34.870 に答える
0

#wrapperページの下部に貼り付けたいと思います（下部からのスペースを除く）

フィドルでコードを変更しました：http://jsfiddle.net/FgGn5/

#wrapper{
position:absolute;
bottom:20px;
margin: 0 5%;
width:90%;
height:20px;
background:red;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
}

absolute底にくっつく位置が必要です。位置の関係で、 と を指定せabsoluteざるを得ません。幸いなことに、パーセントベースのおかげで、それは簡単です。margin-rightmargin-leftwidth

それが役に立てば幸い。

于 2013-06-27T23:09:13.837 に答える