Ustaw wysokość div dopasowaną do przeglądarki przy użyciu CSS

Mam dwa DIV wewnątrz kontenera div, gdzie muszę ustawić oba tak, aby pasowały do okna przeglądarki, jak poniżej, ale nie pasuje do mojego kodu, proszę zasugerować mi rozwiązanieUstaw wysokość div dopasowaną do przeglądarki przy użyciu CSS

enter image description here

Mój kod arkusza stylów

html, body { 
       width: 100%; 
       height: 100%; 
       margin: 0; 
       padding: 0; 

      } 

.container { 
    height: auto; 
    width: 100%; 
} 
.div1 { 
    float: left; 
    height: 100%; 

    width: 25%; 
} 
.div2 { 
    float: left; 
    height: 100%; 
    width: 75%; 
}

ciała

<body> 
<div class="container"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
</div>

Źródło

2013-09-21 Dilukshan Mahendra

Użyj 'min-height', [przykład] (http://jsbin.com/aNICAva/1/edit) – Vucko

Jeśli potrzebujesz 100% wysokości dla obu, dlaczego nie ustawić 'height: 100%' dla '.container'? – Harry

OFF-TOPIC: co użyłeś do stworzenia tego szkicu? – Victor

ustawienia okna całą wysokość pustych div

1-ga rozwiązanie z pozycjonowania absolutnego - FIDDLE

.div1 { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 25%; 
} 
.div2 { 
    position: absolute; 
    top: 0; 
    left: 25%; 
    bottom: 0; 
    width: 75%; 
}

2-gi roztwór o statycznych (można także stosować względne) umieszczenie & jQuery - FIDDLE

.div1 { 
    float: left; 
    width: 25%; 
} 
.div2 { 
    float: left; 
    width: 75%; 
} 

$(function(){ 
    $('.div1, .div2').css({ height: $(window).innerHeight() }); 
    $(window).resize(function(){ 
    $('.div1, .div2').css({ height: $(window).innerHeight() }); 
    }); 
});

Źródło

2013-09-21 15:11:24 mdesdev

Ten działa! Dzięki mdesdev –

Nie ma za co;) – mdesdev

Mężczyzna, spróbuj min-wysokość.

.div1 { 
    float: left; 
    height: 100%; 
    min-height: 100%; 
    width: 25%; 
} 
.div2 { 
    float: left; 
    height: 100%; 
    min-height: 100%; 
    width: 75%; 
}

Źródło

2013-09-21 15:08:47

Człowieku, to było proste. – sotix

Próbowałem już teraz, ale nie działa :( –

Ten kod nie może działać z pustymi divami – mdesdev

Trzeba zadeklarować wysokość html do Div1 elementy razem, jak:

html, 
body, 
.container, 
.div1, 
.div2 { 
    height:100%; 
}

Demo: http://jsfiddle.net/Ccham/

Źródło

2013-09-21 15:14:04

Stary, nie musisz, ale możesz. – user1191559

Można również użyć viewport percentages jeśli nie dbają o starej szkoły IE.

height: 100vh;

Źródło

2014-06-26 04:40:44 Dsmart

Nie sądzę, trzeba unosić.

html, 
 
body, 
 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.div1, .div2 { 
 
    display: inline-block; 
 
    margin: 0; 
 
    min-height: 100%; 
 
} 
 

 
.div1 { 
 
    width: 25%; 
 
    background-color: green; 
 
} 
 

 
.div2 { 
 
    width: 75%; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="div1"></div><!-- 
 
    --><div class="div2"></div> 
 
</div>

display: inline-block; służy do wyświetlania bloków jako inline (podobnie jak przęseł ale utrzymując efekt blokowy)

Komentarze w html służy, bo masz 75% + 25% = 100%. Przestrzeń pomiędzy znakami div (tak masz 75% + 1%? + 25% = 101%, co oznacza podział wiersza)

Źródło

2016-01-19 10:31:24 Dionys

Ustaw wysokość div dopasowaną do przeglądarki przy użyciu CSS

Odpowiedz

Powiązane problemy