left - Altura de barra lateral CSS 100%
menu lateral fijo bootstrap (14)
Además de la respuesta de @montrealmike, ¿puedo agregar mi adaptación?
Hice esto:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
Hice lo "101%" para atender la (ultra rara) posibilidad de que alguien esté viendo el sitio en una gran pantalla con una altura de más de 5000 px.
Gran respuesta, montrealmike. Funcionó perfectamente para mí.
He estado golpeando mi cabeza contra la pared durante horas tratando de resolver este problema y creo que debe ser algo pequeño que me estoy perdiendo. He buscado en línea, pero nada de lo que he encontrado parece funcionar. El HTML es:
<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>
Mi CSS completo es:
* {
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;
}
Me gustaría que la barra lateral se estire en altura con el contenido de mi página y deje la imagen inferior de la barra lateral siempre en la parte inferior de la barra lateral.
Creo que su solución sería envolver su contenedor de contenido y su barra lateral en un elemento primario que contenga div. Flota tu barra lateral hacia la izquierda y dale la imagen de fondo. Cree un margen amplio al menos del ancho de su barra lateral para su contenedor de contenido. Agregue borrar un truco flotante para que todo funcione.
Estaba enfrentando el mismo problema que Jon. TheLibzter me puso en el camino correcto, pero la imagen que debe permanecer en la parte inferior de la barra lateral no estaba incluida. Así que hice algunos ajustes ...
Importante:
- Posicionamiento del div que contiene la barra lateral y el contenido (#bodyLayout). Esto debería ser relativo.
- Posicionamiento del div que debe permanecer en la parte inferior de la barra de desplazamiento (#sidebarBottomDiv). Esto debe ser absoluto.
- El ancho del contenido + el ancho de la barra lateral debe ser igual al ancho de la página (#container)
Aquí está el CSS:
#container
{
margin: auto;
width: 940px;
}
#bodyLayout
{
position: relative;
width: 100%;
padding: 0;
}
#header
{
height: 95px;
background-color: blue;
color: white;
}
#sidebar
{
background-color: yellow;
}
#sidebarTopDiv
{
float: left;
width: 245px;
color: black;
}
#sidebarBottomDiv
{
position: absolute;
float: left;
bottom: 0;
width: 245px;
height: 100px;
background-color: green;
color: white;
}
#content
{
float: right;
min-height: 250px;
width: 695px;
background-color: White;
}
#footer
{
width: 940px;
height: 75px;
background-color: red;
color: white;
}
.clear
{
clear: both;
}
Y aquí está el html:
<div id="container">
<div id="header">
This is your header!
</div>
<div id="bodyLayout">
<div id="sidebar">
<div id="sidebarTopDiv">
This is your sidebar!
</div>
<div id="content">
This is your content!<br />
The minimum height of the content is set to 250px so the div at the bottom of
the sidebar will not overlap the top part of the sidebar.
</div>
<div id="sidebarBottomDiv">
This is the div that will stay at the bottom of your footer!
</div>
<div class="clear" />
</div>
</div>
</div>
<div id="footer">
This is your footer!
</div>
Esto funcionó para mí
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -5000px; /* any large number will do */
padding-bottom: 5000px;
....
}
Flexbox ( http://caniuse.com/#feat=flexbox )
Primero ajuste las columnas que desee en una sección o div, por ejemplo:
<div class="content">
<div class="main"></div>
<div class="sidebar"></div>
</div>
A continuación, agregue el siguiente CSS:
.content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
Hasta que el flexbox de CSS se vuelva más convencional, siempre puedes posicionar absolutamente la barra lateral, manteniéndola a cero píxeles de la parte superior e inferior, y luego establecer un margen en tu contenedor principal para compensar.
JSFiddle
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; }
Nota : Esta es una manera sencilla de hacerlo, pero encontrará que bottom no significa "parte inferior de la página", sino "parte inferior de la ventana". La barra lateral probablemente terminará abruptamente si tu contenido principal se desplaza hacia abajo.
Me doy cuenta de que esta es una publicación anterior, pero estaba tratando de encontrar algo para que mi sitio tuviera una barra lateral. ¿Esto funcionaría?
#sidebar-background
{
position:fixed;
width:250px;
top:0;
bottom:0;
background-color:orange;
}
#content-background
{
position:fixed;
right:0;
top:0;
bottom:0;
left:250px;
background-color:pink;
}
#sidebar
{
float:left;
width:250px;
}
#content
{
float:left;
width:600px;
}
<div id="sidebar-background"></div>
<div id="content-background"></div>
<div id="sidebar">Sidebar stuff here</div>
<div id="content">Stuff in here</div>
Me he topado con este tema varias veces en diferentes proyectos, pero he encontrado una solución que funciona para mí. Debe usar cuatro etiquetas div, una que contenga la barra lateral, el contenido principal y un pie de página.
Primero, modele los elementos en su hoja de estilo:
#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;
}
Puede editar los diferentes elementos como quiera, solo asegúrese de no cambiar la propiedad del pie de página "borrar: ambos"; esto es muy importante para dejarlo.
Luego, simplemente configure su página web así:
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
Escribí una publicación de blog más detallada sobre esto en http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container . Por favor hazme saber si tienes preguntas. ¡Espero que esto ayude!
Posición absoluta, arriba: 0 y abajo: 0 para la barra lateral y posición relativa para el contenedor (o contenedor) que contiene todos los elementos y listo.
Supongo que hoy uno probablemente usaría flexbox para esto. Mira el ejemplo del Santo Grial .
Tal vez los diseños de múltiples columnas escalar de la caja es lo que estás buscando?
Yo usaría tablas css para lograr una altura de barra lateral del 100%.
La idea básica es envolver la barra lateral y los divs principales en un contenedor.
Dale al contenedor una display:table
Y dale a los 2 divs secundarios (barra lateral y principal) una display: table-cell
Al igual que..
#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}
Echa un vistazo a esta DEMO EN VIVO donde he modificado tu marcado inicial usando la técnica anterior (he usado colores de fondo para los diferentes divs para que puedas ver cuáles son cuáles)
use el fondo del cuerpo si usa una barra lateral de ancho fijo para obtener la misma imagen de ancho que su barra lateral. también ponga background-repeat: repeat-y en sus códigos CSS.
ACTUALIZACIÓN: Como esta respuesta todavía está recibiendo votos tanto hacia arriba como hacia abajo, y en el momento de escribir esto tiene ocho años : probablemente haya mejores técnicas ahora. La respuesta original sigue a continuación.
Está claro que está buscando la técnica de Faux columns :-)
Según cómo se calcula la altura-propiedad, no puede establecer la height: 100% dentro de algo que tiene altura automática.