第一事業部全尺寸，空白

我想使第一個div（紅色框）顯示窗口，可擴展的全尺寸。 Layer2（藍色塊）假設總是在之下。然而，當我使窗口的高度變短，我發現layer2去在中間，請看下面的圖片

enter image description here

所以我試圖在申請overflow:hidden，但layer2的藍色區域仍然在layer1上重疊。如何以正確的方式做到這一點。至於如果改變窗口大小一樣的手機，它看起來不正確:(

請參閱移動視圖

enter image description here

如果有人可以幫助。謝謝

HTML

<div class="layer1"> 
     <h1>HELLO WORLD</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div class="layer2"> 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum 
</div>

CSS

html,body{ 
    height: 100%; 

} 
body{ 
padding: 0; 
    margin: 0; 
} 
.layer1{ 
width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    background:red; 

} 
.layer2{ 
    background:blue; 
    position:relative; 
    top:100%; 
}

來源

2014-02-10 olo

我沒有解釋更多你想要的 –

位置：絕對是導致問題的原因。 – Danield

，如果你改變你的風格以下

html,body{ height: 100%; padding: 0; margin: 0;} 
.layer1{ width: 100%; min-height: 100%; background:red; overflow:auto;} 
.layer2{ background:blue; position:relative; overflow:auto;}

它應該做你想要什麼：fiddle

來源

2014-02-10 11:44:28 Pete

嘗試此代碼，它應該與您的HTML示例一起工作。

live demo

CSS代碼

HTML，身體{ 高度：100％;}

體{填充：0; margin：0;}

.layer1 { margin：auto 0; 寬度：100％; 身高：100％; left：0; top：0; background：red;}

.layer2 { background：blue; top：100％; }

來源

2014-02-10 11:35:51 jayjojayson

紅色大於屏幕高度時，文字仍會溢出 – Pete

-1

請更換這個CSS和嘗試...

.layer2{ 
    background:blue; 
    position:relative; 
    top:100%; 
    width: 80%; 
    margin:0 auto; 
}

來源

2014-02-10 11:57:57

第一事業部全尺寸，空白

回答

相關問題