1
下のコードでは、私は奇妙な問題にぶち当たっていました。ボディの高さとフッターが底にくっつくCSSの問題
1）mainContainer divの下に高さ11pxの黒い棒が表示されますが、それは消えません。 body要素にtop、left、right、bottomの絶対位置を0に設定しても、スクロールバーには何の理由もありません。
2）フッターは常に底にくっつくはずですが、mainBody divをオーバーラップしないようにしてください。これを達成するために、私はそれを絶対的な位置にし、それを相対位置でmainContainer divの子にしました。しかし、それでも一定の高さまでmainBody divをオーバーレイします。
私はしばらくの間、これらの問題を解決しようとしてきましたが、わかりません。だから私はあなたたちが私を助けてくれることを願っています。
html {
\t height: 100%;
}
body {
\t height: 100%;
\t padding: 0;
\t margin: 0;
}
@font-face {
font-family:"Glass Antiqua";
src: url("GlassAntiqua-Regular.ttf");
}
body {
\t font-family: Glass Antiqua;
\t color: White;
\t font-size: 50px;
\t background-color: black;
}
header #logo h1 {
\t margin-top: 10px;
}
nav ul li:hover > ul {
\t display: block;
}
nav ul {
\t width: calc(100% - 40px);
\t margin-top: 0;
\t background: #234e60;
\t background: linear-gradient(top, #234e60 0%, #245163 100%);
\t background: -moz-linear-gradient(top, #234e60 0%, #245163 100%);
\t background: -webkit-linear-gradient(top, #234e60 0%,#245163 100%);
\t box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
\t padding: 0 20px;
\t list-style: none;
\t position: relative;
\t display: inline-table;
\t font-size: 20px;
}
nav ul:after {
\t content: ""; clear: both; display: block;
}
nav ul li:first-child {
\t margin-left: 8px;
}
nav ul li {
\t float: left;
}
nav ul li:hover {
\t background: #193e4e;
\t background: linear-gradient(top, #193e4e 0%, #1a4050 40%);
\t background: -moz-linear-gradient(top, #193e4e 0%, #1a4050 40%);
\t background: -webkit-linear-gradient(top, #193e4e 0%,#1a4050 40%);
}
nav ul li:hover a {
\t color: #fff;
}
nav ul li a {
\t display: block; padding: 25px 35px;
\t color: #fff; text-decoration: none;
}
footer {
\t bottom: 0;
height: 150px;
position: absolute;
}
#mainContainer {
\t margin: auto;
\t padding-left: 25px;
\t padding-right: 25px;
\t width: 830px;
\t min-height: 100%;
\t background: #377a96;
\t position: relative;
}
#logo {
\t background: url(http://www.icecub.nl/images/banner_bats.png);
\t height: 130px;
\t margin-top: 0px;
\t border: 1px solid black;
\t text-align: center;
}
#hr_lines {
\t width: 100%;
\t height: 3px;
\t background: white;
\t position: relative;
}
#hr_blue {
\t width: 100%;
\t height: 1px;
\t position: absolute;
\t top: 1px;
\t background: #234e60;
}
#mainBody {
\t height: 500px;
\t border: 1px solid red;
}
#img_footer {
\t width: 830px;
\t height: 150px;
}<div id="mainContainer">
\t <header>
\t \t <div id="logo">
\t \t \t <h1>Welcome</h1>
\t \t </div>
\t \t <div id="hr_lines">
\t \t \t <div id="hr_blue"></div>
\t \t </div>
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <li><a href="home.html">Home</a><li>
\t \t \t \t <li><a href="introductie.html">Introductie</a></li>
\t \t \t \t <li><a href="opleiding.html">Mijn Opleiding</a></li>
\t \t \t \t <li><a href="werk.html">Eigen Werk</a></li>
\t \t \t \t <li><a href="contact.html">Contact</a></li>
\t \t \t </ul>
\t \t </nav>
\t </header>
\t <div id="mainBody"></div>
\t <footer>
\t \t <img src="http://www.icecub.nl/images/boo.png" id="img_footer" alt="Afsluiting" />
\t </footer>
</div>
（
150px;ので、それをめちゃくちゃにされた）、それの高さを調整します。relative'をあなたの '＃mainContainer' div ... – Joum@Joum私がそれを削除すれば、それはフッタがmainBodyを完全に覆うことを許します。あなたのブラウザのサイズをもっと小さくしてみて、私が何を意味するのかを確かめてください。 – icecub
ええ、私はそれを見ました...あなたの問題を他の人の回答がカバーするかもしれませんが、 getbootstrap.comの方向に...あなたがしたいことの多くはすでにそれらによって覆われていることが私には分かります... – Joum