Come posso creare un layout di pagina web reattivo con 'display: inline-block'?

Question

Voglio creare una semplice pagina Web reattiva da zero, solo un file HTML e un file CSS. Questo era inteso come un breve esercizio, ma si è rivelato che ho sottovalutato la complessità.

Il layout è semplice. Un'intestazione, la parte principale, la barra laterale e il piè di pagina. La barra laterale dovrebbe avere una larghezza fissa e il contenuto principale dovrebbe utilizzare il resto dello spazio orizzontale. La barra laterale dovrebbe scomparire se la larghezza dello schermo è inferiore a 480px. Un'icona del menu non è ancora pianificata; Voglio solo sparire la barra laterale e il contenuto principale per utilizzare successivamente il 100% dello spazio.

Dopo aver rinunciato ai div flottanti, ho iniziato a leggere molto sull'uso del display: blocco in linea per questo scopo. Ad esempio qui . Questo sembra funzionare molto meglio del galleggiante, ma ci sono alcuni problemi che non posso risolvere.

.

• In una grande finestra funziona bene ora. Ma se riducono la finestra a una dimensione più piccola, il layout inizia a rompere. Lo so che è perché la barra laterale è fissa, ma il principale è in percentuale. Pertanto, quando la finestra diventa più piccola, anche lo spazio che rimane per la barra laterale diminuisce. Come posso "dire" il div principale a sempre "riempire il resto dello spazio"?

• La query del supporto che rende la barra laterale scompare, ma lascia un gap. Non capisco perché non ridimensiona in base al mio file CSS.

Questo è il mio codice HTML e CSS:

<div id="wrapper">
        <div id="header">
            <img src="logo.jpg" alt="Smiley face" style="height:15%;width:50%;">
        </div>
        <div id="mainWrap">
            <div id="sidebar">
                Sidebar
            </div>
            <div id="main">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Main
            </div>
        </div>
        <div id="footer">
            Footer
        </div>
    </div>

.

E questo è il mio file CSS:

@media screen and (max-width:480px){

#sidebar {
visibility:hidden;
width:0;
}
#main{
    width:100%;
}

#mainWrap{
font-size:0;
}
#header{
color:white;
margin-bottom:4em;
}


#sidebar{
font-size:12px;
width:25%;
vertical-align:top;
display:inline-block;
}

#main{
font-size:12px;
width:75%;
display:inline-block;
vertical-align:top;

}

#footer{
    font-size:12px;
    border-style: solid;
}

.

Answer 1

Verifica questo: http://jsfiddle.net/panchroma/bjh35/ L'HTML è lo stesso dei tuoi, alcune importanti cambiamenti nel CSS.

In primo luogo, hai avuto un errore di sintassi e non ha chiuso il

@media screen and (max-width:480px){
.... 
} <==== you forgot this curly brace  

.

In secondo luogo, è necessario inserire la query del supporto dopo il blocco CSS principale, altrimenti la maggior parte delle impostazioni verrà sostituita da ciò che si è inferiore nel foglio di stile.

Infine, per rimuovere la barra laterale a Viewport ristretti, si desidera utilizzare display:none; che hai generatoDicetagCode che nasconde semplicemente l'elemento, ma è ancora presente lo spazio sulla pagina

Spero che questo aiuti!

CSS

#mainWrap{
font-size:0;
    background-color:#aaa;
}
#header{
color:white;
margin-bottom:4em;
    background-color:#ddd;
}


#sidebar{
font-size:12px;
width:25%;
vertical-align:top;
display:inline-block;
    background-color:pink;
}

#main{
font-size:12px;
width:75%;
display:inline-block;
vertical-align:top;
    background-color:olive;

}

#footer{
    font-size:12px;
    border-style: solid;
    background-color:#ffc;
}

@media screen and (max-width:480px){

    #sidebar {
        display:none;
    }

    #main{
        width:100%;
    }
}

.

Answer 2

... Anche se sono troppo stanco per leggere tutto il tuo codice, ecco la tua soluzione:

<div class="container">
  <div class="sidebar">
    sidebar here
  </div>

  <div class="content">
    content here
  </div>
</div

<style>
.container {
  width:100%;
}
.sidebar {
  background:red;
  position:fixed;
  width:200px;    
}
.content {
  position:relative;
  display:block;
  background:green;
  margin-left:220px;    
}
@media (max-width:480px) {
 .sidebar {
  display:none;
  }
  .content {
   margin-left:0;    
  }    
}
</style>

.

http://jsfiddle.net/d78g2/1/