1

中央のコンテンツが赤い背景のシンプルな Web ページがあります。コンテンツが多いかどうかに関係なく、その背景色がページの一番下まで届くようにしたいと思います。

メソッドのさまざまな組み合わせを試しましたが、正しくストレッチするものはないようです。Fiddle で、フレックスボックスを使用しようとしていますが、機能していないようです。

body {
  background-color: white;
}

.main {
  max-width: 80%;
  background-color: red;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  align-content: stretch;
  flex-direction: row;
}
<section class="main">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at aliquam dolor. Pellentesque a nibh in magna blandit elementum. Sed sodales porttitor dolor vel bibendum. Ut viverra justo in elit scelerisque, nec accumsan arcu facilisis. Nam ultricies
    leo vitae felis sollicitudin lobortis. Cras nec nibh venenatis, bibendum neque at, suscipit lacus. Vestibulum interdum sodales cursus. Pellentesque feugiat eu velit venenatis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
    faucibus risus quis est pellentesque ultrices.
  </p>
</section>

<section class="main">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
</section>

body
{
    background-color:white;
}

.main
{
    max-width:80%;
    background-color:red;
    margin: 0 auto;
    padding: 10px;

    display:flex;
    align-content:stretch;
    flex-direction:row;
}
4

3 に答える 3

3

メソッドのさまざまな組み合わせを試しましたが、正しくストレッチするものはないようです

flexフレックスなしで実際にこれを達成できるため、唯一のソリューションは必要ないと思います。それがポイントである場合は、親要素heightを100%

デモ

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  background-color: white;
  height: 100%;
}

.main {
  max-width: 80%;
  background-color: red;
  margin: 0 auto;
  padding: 10px;
  height: 100%;
}
<section class="main">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at aliquam dolor. Pellentesque a nibh in magna blandit elementum. Sed sodales porttitor dolor vel bibendum. Ut viverra justo in elit scelerisque, nec accumsan arcu facilisis. Nam ultricies
    leo vitae felis sollicitudin lobortis. Cras nec nibh venenatis, bibendum neque at, suscipit lacus. Vestibulum interdum sodales cursus. Pellentesque feugiat eu velit venenatis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
    faucibus risus quis est pellentesque ultrices.
  </p>
</section>

また、以下のスニペットを使用していることがわかります

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

、要素の外側でこれらをカウントするデフォルトのボックスモデルの代わりに、内側の要素の 、をカウントするだけなbordersので、使用していたように垂直スクロールにはなりません。要素であるため、スクロールが発生します。paddingpaddingheight: 100%;padding

于 2013-10-01T07:05:37.820 に答える
2

box-sizing良いオプションです。これは CSS3 プロパティです。

もう1つのオプションがあります。

body, html {
    min-height:100%;
    height: 100%;
    margin:0;
}
.innerBox {
    min-height:100%;
    width: 80%;
    background: red;
    margin: 0 auto;
}
<div class="innerBox">
    Testing
</div>

于 2013-10-01T08:55:46.423 に答える