0

最初の「ページ」のコンテンツが中央に配置され、下にスクロールするように、ページと同様の効果を得るために、html と本文 (および使用するすべてのラッパー div) で height: 100% を使用する必要があるレイアウトがあります。 2 番目の「ページ」のコンテンツは中央に配置されます。

html は次のようになります。

<section class="page" id="p01">
<div class="spacer">
</div>
<div class="outer">
    <div class="inner">
        Some content
    </div>
    <div class="inner">
        Some content
    </div>
</div>
</section>
<section class="page" id="p02">
<div class="spacer">
</div>
<div class="outer">
    <div class="inner">
        Some content
    </div>
    <div class="inner">
        Some content
    </div>
</div>
</section>

このスタイリングで達成される垂直センタリングなど：

body, .page {height: 100%; margin: 0 auto;}

.spacer {
float: left;
height: 50%;
margin-bottom: -150px;
}
.outer {
height: 300px;
width: 100%;
background-color: #fca;
clear: both;
position: relative;
display: block;
white-space: nowrap;
}
.inner {
width: 41%;
margin: 0 6%;
height: 300px;
background-color: green;
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.inner:first-child {
margin-right: 0;
}

このフィドルで動作しているのを見ることができます：

http://jsfiddle.net/terraling/3V5rV/

問題は、本文の背景 (ここでは色を使用しているだけですが、私のサイトでは画像になります) が本文の余白に漏れ出すことです。つまり、本文のコンテンツには最大幅があり、白い余白を中央に配置する必要があります。

I can fix that either by... setting html background-color to white, as per

http://jsfiddle.net/terraling/yM53t/

...but body background becomes cutoff when scrolling into the second page (that wasn't a problem in the first fiddle).

Alternatively I could set the background image on a wrapper div and not on the body. That solves the problem of it leaking into the body margins, but it still has the same problem that it is cut off on scrolling.

(see: http://jsfiddle.net/terraling/3V5rV/1/ )

Any solution that involves removing the height: 100% declaration from any of html, body or wrapper collapses the layout (including replacing with max-height: 100%).

4

2 に答える 2

2

この構成には多くの問題があり、残念ながらすべてを解決できるわけではありません。

背景の問題

ご覧のとおり、 に背景がないbody場合、 の背景はビューポートに拡張されます。htmlそれは解決可能です。

フロートの問題

要素がフローティングの場合、親要素の高さには影響しません。そのため、それらは成長しません (たとえば、体が拡張しません)。代替手段を使用できる場合、それは解決できます。要素display: table-cellを垂直方向に中央揃えするには、たとえば、コンテンツを垂直方向に中央揃えにすることができます。

高さの問題

ここですべての希望が失われました。height: 100%もちろん、親の身長を指します。の親はbody、htmlビューポートの子です。htmlサイズ100%(= ビューポートbodyのサイズ) と100%(= サイズ= ビューポートのサイズ) のサイズを指定しましhtmlた。

そのbodyため、高さが固定されて拡大できなくなりました。つまり、背景も拡大されません。bodyここで、拡張できるようにサイズを指定しないという考えがあるかもしれません。しかし、あまりにも.page持ってい100%ます。親 (この場合bodyは ) に固定サイズ100%がない場合は意味がなく、コンテンツと同じ大きさを意味する として扱われautoます。コンテンツの高さは300pxです。したがって、.page要素の高さはビューポートの高さではなくなります300px。

于 2013-07-02T18:08:16.860 に答える
0

As for the collapse of the CSS, you should either specify the height specifically height:200px; or add padding to the bottom/top of the page so that the content wraps. You can also use min-height:200px; then add the margin-bottom:20px; to separate the pages. I would approach this at a specific height with the wrapper having the specific background-image and bottom-margin.

In order to center your background-image to the <html> you can specify the position as 50%. This can be done by doing background:url('yourimage.jpg') repeat 0 50%;This will ensure the background is centered.

于 2013-07-02T12:12:18.243 に答える