web-dev-qa-db-fra.com

Barre latérale pleine hauteur et contenu pleine hauteur, disposition fluide

Le doublon possible n'a pas aidé

Je sais qu'il existe de nombreuses réponses à ce sujet, mais aucune d'entre elles ne m'a aidé et j'ai passé plusieurs jours sur Ce problème . 90% des réponses et des livres donnent cette astuce qui ne m'a pas aidé.

Mon code - Plunker

HTML

<body >
<h1>Hello Plunker!</h1>

<div class="sidebar">
  <ul>
        <li><a href="#">ANALYTICS</a></li>
        <li><a href="#">STYLES</a></li>
        <li><a href="#">VOTERS</a></li>
        <li><a href="#">GET STARTED</a></li>
        <li><a href="#">UPDATE</a></li>
  </ul>
</div>
<div class="content">
  <p>Content</p>
</div>

CSS

body{
  width: 100%;
  margin: 0 auto;

}

.content {
  width: 95%;
  display: inline;
  float: left;
  background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}

.sidebar{
  width: 5%;
  display: inline;
  height: 100%;
  float: left;
  background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;

}

.sidebar ul{
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;

}

.sidebar li{
     padding: 50%;
     position: relative;
}

.sidebar a{
        display: block;
        font-size: 0.5em;
        position: absolute;
        bottom: 0;
        left: 0;
}

En ce moment, ma mise en page ressemble à ceci:

Right now my layout looks like this:

Et je veux que ça ressemble à ceci:

J'ai suivi ce guide proposé dans la possibilité de dupliquer et cela n’a pas aidé Je pense que c’est parce que j’utilise floats et fluid layout.

Comment puis-je étendre les colonnes tout en conservant le positionnement fluid layout et float.

csscss3css-float
10
Canttouchit

J'ai mis à jour votre code. Découvrez-le sur Plunker . 

Au début, essayez de ne pas utiliser les positions absolute ou relative, si elles ne sont pas nécessaires. 

La seconde, dans votre cas en donnant les styles display: inline et float: left, fait la même chose, donc il y en a assez pour n’utiliser que le dernier. 

De plus, j’ai défini les balises height sur HTML et BODY à 100% et fait de même pour sidebar et contentDIVs, de sorte qu’elles auront la hauteur fill et parent (body). 

Enfin, l'un de vos problèmes était la valeur repeat-y de la propriété background. Il ne s'est pas répété sur l'axe des x, vous n'avez donc pas vu la taille réelle de DIVs. Je viens de le définir sur repeat au lieu de repeat-y.

9
Karlen Kishmiryan

Essayez quelque chose comme ça:

VIOLON

Balisage:

<h1>Hello Plunker!</h1>
<div class="container">       
    <div class="sideBar">sideBar</div>
    <div class="content">content</div>
</div>

CSS

*
{
    margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
    height: 100%;
}
h1
{
    height: 50px;
    line-height: 50px;
}
.container
{
    margin-top: -50px;
    padding-top: 50px;
    box-sizing: border-box;
}
.sideBar
{
    float:left;
    width: 100px;
    background: aqua;
}
.content
{
    overflow:hidden;
    background: yellow;   
}
5
Danield

C'est un peu une vieille question mais Zurb les gars ont une bonne solution pour cela.

http://foundation.zurb.com/apps/

0
Andrej Kaurin