Div的高度響應

我寫信給你有大問題，Div的高度響應

如果你讓你的瀏覽器窗口更小，高度不變。有人可以幫我修復它嗎？

這裏是HTML片段（含圖片背景）：

<div class="container"> 
<div class="slider" id="section1"> 
<div class="naglowek"> 
<h1>POLSKA - FRANCJA</h1> 
<h2>NIEMCY - LUXEMBURG - BELGIA</h2> 
<h3>Szybki i bezpieczny transport od drzwi do drzwi</h3> 
<br /> 

<button type="button" class="btn btn btn-danger btn-lg" onclick="window.location.href='#section5'">ZAREZERWUJ</button> 
</div> 
</div> 
...

和CSS片段：

.slider{ 
    width:100%; 
    height: 700px; 
    margin-top: 58px; 
    background-image: url("img/baner2.png"); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    color: #ffffff; 
    display: block; 
} 
.container{ 
    position: relative; 
    height: 100%; 
    margin: 0 auto 0; 
}

我知道，現在不好用height: 700px;但我不知道如何解決它。

我使用bootstrap。

來源

2017-03-01 Giacomo

去驗證你的代碼，並修正所有錯誤https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.ggoraj.pl%2F – mlegg

如果您希望它增長或縮小，請使用700px的最小高度或最大高度。 – Bryan

嗯，這樣你就可以用「VW」的高度，這將迫使容器的高度來聽的寬度的瀏覽器窗口（並相應地向上或向下滑動一切）。這會讓廣泛的瀏覽器非常高，但你可以設置700px的最大高度。

所以：

.slider { 
    width: 100%; 
    height: 50vw; 
    max-height: 700px; 
    position: relative; 
    margin-top: 58px; 
    background-image: url(img/baner2.png); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    color: #ffffff; 
    display: block; 
} 

.naglowek { 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center; 
}

來源

2017-03-01 17:52:47

其工作:)！但我有文字大小的問題。我如何使文字響應？ – Giacomo

嗯，你是這樣做的（使用vw）。這可以工作，如果它給你想要的效果。否則，如果您需要更多控制權，請使用媒體查詢在特定瀏覽器寬度下調整爲特定大小。 –

vw是okey :)非常感謝這個幫助:) – Giacomo

使用媒體查詢來修復它，因此一旦屏幕變小，就會減小div的高度。

@media only screen and (max-width: 500px) { 
.slider{ 
width:100%; 
height: 300px; 
} 
}

意味着一旦該屏幕比500像素越小，高度將降低

來源

2017-03-01 17:50:36 altoin

Div的高度響應

回答

相關問題