Hauteur de la barre latérale CSS 100%

Question

Hauteur de la barre latérale CSS 100%

Demandé el 26 de Avril, 2009: Quand la question a-t-elle été
88857 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je frappe ma tête contre le mur depuis des heures pour essayer de résoudre ce problème et de penser que ce doit être quelque chose de petit qui me manque. J'ai cherché en ligne, mais rien de ce que j'ai trouvé ne semble fonctionner. Le HTML est:

 <body>
  <div id="header">
    <div id="bannerleft">
    </div>

    <div id="bannerright">
      <div id="WebLinks">
        <span>Web Links:</span>
        <ul>
          <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
          <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
          <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="Sidebar">
    <div id="SidebarBottom">
    </div>
  </div>
  <div id="NavigationContainer">
    <ul id="Navigation">
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
    </ul>
  </div>
  <div id="Main">
    <!-- content -->
  </div>
</body>

Mon CSS complet est:

 *
{
    margin:0px;
    padding:0px;
}

body 
{
    font-family:Calibri, Sans-Serif;
    height:100%;
}
#header
{
    width:100%;
    z-index:1;
    height:340px;
    background-image:url("../../Content/images/bannercenter.gif");
    background-repeat:repeat-x;
}
#header
#bannerleft
{
    float:left;
    background-image:url("../../Content/images/bannerleft.gif");
    background-repeat:no-repeat;
    height:340px;
    width:439px;
    z-index:2;
}
#bannerright
{
    float:right;
    background-image:url("../../Content/images/bannerright.gif");
    background-repeat:no-repeat;
    width:382px;
    height:340px;
    background-color:White;
    z-index:2;
}
#Sidebar
{
    width:180px;
    background:url("../../Content/images/Sidebar.png") repeat-y;
    z-index:2;
    height:100%;
    position:absolute;
}
#SidebarBottom
{

    margin-left:33px;
    height:100%;
    background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}
#NavigationContainer
{
position:absolute;
top:350px;
width:100%;
background-color:#bbc4c3;
height:29px;
z-index:1;
    left: 0px;
}
#Navigation
{
margin-left:190px;
font-family:Calibri, Sans-Serif;
}
#Navigation li
{
float:left;
list-style:none;
padding-right:3%;
padding-top:6px;
font-size:100%;
}
#Navigation a:link, a:active, a:visited
{
color:#012235;
text-decoration:none;
font-weight:500;
}
#Navigation a:hover
{
    color:White;
}
#WebLinks
{
float:right;
color:#00324b;
margin-top:50px;
width: 375px;
}
#WebLinks span
{
float:left;
margin-right:7px;
margin-left:21px;
font-size:10pt;
margin-top:8px;
font-family:Helvetica;
}
#WebLinks ul li
{
float:left;
padding-right:7px;
list-style:none;
}
#WebLinks ul li a
{
text-decoration:none;
font-size:8pt;
color:#00324b;
font-weight:normal;
}
#WebLinks ul li a img
{
    border-style:none;
}
#WebLinks ul li a:hover
{
    color:#bcc5c4;
}

Je voudrais que la barre latérale s’étende en hauteur avec le contenu de ma page et laisse l’image inférieure de la barre latérale toujours en bas de la barre latérale.

Demandé el 26 de Avril, 2009 par Jon

Answer 1

5 Réponses

Answer 2

98voto

montrealmike Points 3795

Cela a fonctionné pour moi

 .container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}

Répondu el 9 de Décembre, 2011 par montrealmike (3795 Points )

Answer 3

32voto

ajkochanowicz Points 1763

Jusqu'à ce que CSS, flexbox est à la mode, vous pouvez toujours absolument position de la barre latérale, il s'en tenir à zéro pixels à partir du haut et du bas, puis définissez une marge sur votre conteneur principal pour compenser.

JSFiddle

http://jsfiddle.net/QDCGv/

HTML

<section class="sidebar">I'm a sidebar.</section>

<section class="main">I'm the main section.</section>

CSS

section.sidebar {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: green;
}

section.main { margin-left: 250px; }

Note: Ceci est un über simple de faire cela, mais vous trouverez bottom ne signifie pas "bas de page", mais "en bas de la fenêtre." La barre latérale sera probablement abrubtly fin si votre contenu principal défile vers le bas.

Répondu el 28 de Décembre, 2012 par ajkochanowicz (1763 Points )

Answer 4

29voto

Arve Systad Points 3628

De toute évidence, vous recherchez la technique des colonnes fausses :-)

Selon le mode de calcul de la propriété hauteur, vous ne pouvez pas définir la hauteur: 100% à l'intérieur de quelque chose qui a l'auto-hauteur.

Répondu el 26 de Avril, 2009 par Arve Systad (3628 Points )

Answer 5

14voto

Danield Points 17720

Je voudrais utiliser des règles css pour atteindre 100% de la hauteur de la barre latérale.

L'idée de base est d'enrouler la barre latérale principale et des divs dans un récipient.

Donner le conteneur en display:table

Et de donner l'2 enfant divs (barre latérale et principal) display: table-cell

Comme si..

#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}

Jetez un oeil à cette DÉMO en LIVE où j'ai modifié votre initiale balisage à l'aide de la technique décrite ci-dessus (j'ai utilisé les couleurs de fond pour les différentes divisions de sorte que vous pouvez voir ceux qui sont qui)

Répondu el 17 de Janvier, 2013 par Danield (17720 Points )

Answer 6

4voto

TheLibzter Points 449

J'ai rencontré ce problème à plusieurs reprises sur différents projets, mais j'ai trouvé une solution qui fonctionne pour moi. Vous avez l'utilisation de quatre balises div qui contient la barre latérale, le contenu principal, et un pied de page.

D'abord, le style, les éléments dans votre feuille de style:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

Vous pouvez modifier les différents éléments mais vous voulez, juste être sûr que vous n'avez pas modifier le pied de page de la propriété "clear:both" - c'est très important de laisser dans.

Ensuite, il suffit de configurer votre page web comme ceci:

<div id="container">
<div class="sidebar"></div>
<div class="content"></div>
<div id="footer"></div>
</div>

J'ai écrit un peu plus en profondeur blog post à ce sujet à http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. S'il vous plaît laissez-moi savoir si vous avez des questions. Espérons que cette aide!

Répondu el 22 de Août, 2010 par TheLibzter (449 Points )

Hauteur de la barre latérale CSS 100%

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Hauteur de la barre latérale CSS 100%

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: