Giacomo Giacomo -4 years ago 81
CSS Question

Div's height responsive

i am writing to you with big problem,

if you make your browser window smaller, height does not change. Can someone help me fix it?

Here is fragment of html(with image background):

<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>
...


And css fragment:

.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;
}


I know, that now is bad with
height: 700px;
but i dont know how fix it.

I use bootstrap.

Answer Source

Hmm, so you can use "vw" on the height, which will force the height of the container to listen to the width of the browser window (and slide everything up or down accordingly). That will make it very tall for wide browsers, but you can set a max-height of 700px.

So:

.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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download