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的高度响应

回答

相关问题