Impostare l'altezza div per adattarsi al browser usando il CSS

Ho due DIV all'interno di un contenitore div, dove ho bisogno di impostarli entrambi per adattarli alla finestra del browser come di seguito, ma non si adatta al mio codice, per favore suggerisci me una soluzioneImpostare l'altezza div per adattarsi al browser usando il CSS

enter image description here

Il mio codice Style Sheet

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

corpo

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

fonte

2013-09-21 Dilukshan Mahendra

Usa 'min-height', [example] (http://jsbin.com/aNICAva/1/edit) – Vucko

Se hai bisogno di un'altezza del 100% per entrambi, perché non impostare 'height: 100%' per '.container'? – Harry

OFF-TOPIC: cosa hai usato per creare quello schizzo? – Victor

Impostazione finestra intera altezza div vuoti

1a soluzione con posizionamento assoluto - FIDDLE

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

2a soluzione statico (può anche essere usato un parente) posizionare & 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() }); 
    }); 
});

fonte

2013-09-21 15:11:24 mdesdev

Questo funziona! Grazie mdesdev –

Prego;) – mdesdev

Uomo, prova l'altezza minima.

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

fonte

2013-09-21 15:08:47

L'uomo è stato semplice. – sotix

Ho provato proprio ora, ma non funziona :( –

Questo codice non funziona con div vuote – mdesdev

si deve dichiarare un'altezza di html Div1 elementi insieme, come:

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

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

fonte

2013-09-21 15:14:04

Amico, non devi, ma è possibile. – user1191559

Si potrebbe anche usare viewport percentages se non si cura di vecchia scuola IE.

height: 100vh;

fonte

2014-06-26 04:40:44 Dsmart

Non credo che avete bisogno di galleggiare.

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; viene utilizzato per visualizzare i blocchi come in linea (proprio come campate ma mantenendo l'effetto di blocco)

Commenti nel HTML viene utilizzato perché si ha il 75% + 25% = 100%. Lo spazio tra i div conteggi (quindi hai il 75% + 1%? + 25% = 101%, che significa interruzione di riga)

fonte

2016-01-19 10:31:24 Dionys

Impostare l'altezza div per adattarsi al browser usando il CSS

risposta

Problemi correlati