0
私はCSSを初めて使い、フッタにいくつか問題があります。私は本当に答えを見つけようとしましたが、何も動かないようです。フッターを下にして、他のコンテンツとの最小距離を保つ方法。
ページの一番下にフッタを配置する必要がありますが、同時に他のコンテンツとの最小距離は150ピクセルです。
これまでのところ、私は一番下にフッターを取得することができましたが、最小限の距離で作業することはできません。
<body>
<div class="wrapper">
<div class="header">
<div class="banner">
<h1></h1>
</div>
<div class="navbar">
<ul>
<li><a id="home" class="active" href="home.html">Hjem</a></li>
<li><a id="billeder" href="billeder.html">Billeder</a></li>
<li><a id="video" href="video.html">Video</a></li>
<li><a id="kontakt" href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>
<div class="bodybill">
<div class="content">
<p class="welcome">Some text.</p>
</div>
\t \t
\t \t <div class="leftpic">
\t \t </div>
\t \t
\t \t <div class="rightpic">
\t \t </div>
</div>
<div class="footer">
<footer>Some text</footer>
</div>
</div> \t
</body>html,body {
background-image: url("image.png");
height: 100%;
\t margin: 0;
\t padding: 0;
\t top: 0;
}
div.wrapper {
min-height: 100%;
min-width: 100%;
position: relative;
width:100%;
\t margin-top: 0px;
\t padding-top: 0px;
margin-left: auto;
margin-right: auto;
}
div.header {
padding: 0px;
\t top: 0px;
}
div.bodybill {
padding:0px;
\t height: 600px;
padding-bottom: 100px;
}
div.footer {
position: absolute;
width: 100%;
height: 100px;
background: black;
border-style: solid;
border-width: 1px 0px 1px 0px;
border-color: #141953;
background-image: url("image.png");
bottom: 0;
}
footer {
\t margin-left: 20px;
\t margin-top: 30px;
color: white;
font-size: 14px;
、しかし：
あなたは新しいdiv要素を作成し、
.wrapそれを名前を付け、全身のコンテンツにそれをラップし、.footerとあなたのCSSを除いて、これを行うことができます私は何をしたのですか？ – BrianV
本文のコンテンツをラッパーにラップして、コンテンツの高さが与えられた高さよりも低くても、定義した高さになるように最小の高さを与えました。 100vhは100％ビューポートの高さに似ています。私たちは、ビューポートで.wrap 100％を埋めるようブラウザに指示しています。 calc（100vh - 150px）を使用しました。値が100vhのときにフッターがビューポートの下に移動するためです。フッターの高さは150pxだったので私たちは100vh - 150pxと言ったので、フッターのショーアップとスティックが以下のようになります。私はあなたを説明してくれたことを願っています。私はあなたを混乱させると私を許してくれます。P – NewbieDeveloper
いいえ、それは意味があります:)しかし、私は高解像度の別のモニターに行くとき、フッターは底に100％それを補う方法はありますか？おそらくpxの代わりに％を使うのでしょうか？ – BrianV