2

設計中の 2 つの Web サイトで Less Framework 4 を使用しています。両方のデザインで、ドキュメントの上部と下部の両方に 5 ピクセルの境界線を適用したいと考えています。

問題: bodyにスタイルが適用されているため、border-bottom と border-top をhtmlオブジェクトに適用しているため、通常のスティッキー フッターの状況で発生するように、下の境界線がページの下部にくっつくことはありません。 .

2 つのケースのスクリーンショットを次に示します。

私の再設計

ベルギーのクライアント

これが、html と body に使用している (LESS) CSS です。

html {
    border-top: solid @black 10px;
    border-bottom: solid @black 10px;
    background: url('img/bg.png') repeat;
}

body {
    width: @8col;
    margin: 0px auto;
    padding: 100px 48px 84px;
    background: @white;
    color: rgb(60,60,60);
    -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
    font: 13px/20px 'OftenRegular';
    -webkit-tap-highlight-color: @green;
}

とオブジェクトheight: 100%の両方を使用してみましたが、ライブの様子は次のとおりです: http://prikonline.be/prikactie/bodyhtml

境界線をページの下部に貼り付けるにはどうすればよいですか?

4

8 に答える 8

2

代わりに、このようなフッターラッパーを使用できます。

.footer {
  position: absolute;
  bottom: 0;
  border-bottom: solid @black 10px;
  width: 100%;
}

これを直前</body>または何かに挿入するだけです

<div class="footer"></div>
于 2011-06-05T13:15:44.097 に答える
1

うーん...ページmin-height: 100%にhtml要素を配置する（Web Inspectorで操作する）ことは、Chromeですぐに機能しました。何でテストしていますか？

ただし、このアプローチでは、境界線の高さが100％を少し超えます。これは、IE8 + / Gecko / WebKitでCSSbox-sizingプロパティを使用して修正できます（値を使用border-box）。

IE7とIE6の場合、同じようにレンダリングする場合は、読み込み時またはサイズ変更時にウィンドウの高さをチェックし、ドキュメントの高さと比較し、必要に応じてHTMLを強制する小さなJavaScriptを作成するのは非常に簡単です。窓の高さから20を引いた要素。

于 2011-06-05T13:39:09.187 に答える
1

ある種の動的スタイルシートツール（LESSなど）を使用しているようです。通常、動的スタイルシートツールを使用するとJavaScriptを使用できます。したがって、高さを次のように定義できます。

@height: `window.innerHeight + 'px'`;

そして、次のようなものを追加します

body{
  ...
  min-height: @height;
}

もちろん、これに伴う問題は、ユーザーがブラウザウィンドウのサイズを変更した場合、レイアウトが適切に更新されないことです。window.onresizeコールバックを使用してそれを処理できます。

もちろん、JavaScriptを使用してすべてを処理することもできます。確かに、JavaScriptを使用してスタイリング（動作、コンテンツ、スタイルの分離）を行うことに強く反対する人もいます。粘着性のあるフッターなどを試す場合は、巧妙な方法を考え出すよりも、JavaScriptを2行だけ書くほうが簡単な場合があります。ターゲットにしようとしているすべてのブラウザで機能する場合と機能しない場合があるCSS。ユーザーがJavaScriptをオフにしている場合、コンテンツが少ないページでは、ページがページの高さ全体に表示されません。

window.onload = window.onresize = function(){ 
    document.body.style.minHeight = (window.innerHeight-204) + "px";
    // -4px for the border
    // -200px for the padding on your body element
}
于 2011-06-05T13:41:38.163 に答える
1

CSS を html 要素に適用することはお勧めしません。代わりに、同様のスタイルで div を作成してください。通常、コードは次のようになります。

HTML

<div id="wrapper">
  <!-- main content goes here -->

  <div class="reserveSpace"></div>
</div><!-- #wrapper end -->

<div id="footer"></div>

CSS

* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }

これは、IE6 であっても、すべてのブラウザーで完璧に機能します :)

于 2011-06-05T13:50:33.477 に答える
1

とを使用するposition:fixed;とbottom:0px;、スクロール状態やコンテンツの高さに関係なく、常に下に固定できます。

于 2011-06-05T09:54:11.473 に答える
1

Try changing it to:

height:auto;

for your HTML CSS.

于 2011-06-05T09:55:11.870 に答える
0

下部に本文の境界線を追加する方法は次のとおりです。

body {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  border-bottom: solid 5px #ad3127;
  padding-top: 1px;
}
<p>content</p>

重要なのはmin-height: 100vh、ボディの高さが少なくともビューポートの高さになるようにすることです。の関係box-sizing: border-boxで、ボディの境目はボディ高に計上されます。コンテンツ マージンがビューポートの下の境界線を押す問題はまだありますが、これは任意の値で修正できpadding-topます。

于 2015-09-07T09:18:23.893 に答える