Sé que hay Preguntas que cubre partes de mi Pregunta, pero no puedo ponerlos juntos para hacer mi trabajo de diseño.

Así que, básicamente quiero un dos Diseño de la Columna con un fijo Lateral y el Contenido dinámico llenar el espacio restante.

HTML:

<body>
    <div id="navbar">
        <ul>
            <li>Nav 1</li>
            <li>Nav 2</li>
            <li>Nav 3</li>
        </ul>
    </div>

    <div id="content">
    </div>
</body>

CSS:

html, body {
    height:100%;
    margin: 0;
    padding: 0;
    border: 0;
}

#content {
    height:100%;
    float:left;
    /*margin: 0 0 0 200px;*/
}

#navbar{
    height:100%;
    width:200px;
    float:left;
}

Con este CSS tengo el Problema de que mi contenido no está ocupando el Espacio restante, y si puedo quitar el flotador me sale una barra de desplazamiento vertical, porque hay un margen en la parte superior!

Alguna sugerencia de cómo puedo lograr el 100% de la Altura sin barra de desplazamiento (sin rebosadero oculto debido a que no quite el margen en la parte superior) y de contenido dinámico ancho?

gracias de antemano

EDICIÓN:

Irónicamente funciona con jsfiddle

  • ¿Qué acerca de un violín
  • uh, un violín? ¿Qué acerca de una URL?
  • usted quiere que su div#contenido tienen una dinámica de ancho ?
  • jsfiddle.net
InformationsquelleAutor makim | 2013-09-05

3 Comentarios

  1. 2

    Aquí es una solución que da el 100% de la altura para ambos, el contenido y la barra de exploración:

    violín: http://jsfiddle.net/92c6M/

    HTML

    <div id="navbar">
        <ul>
            <li>Nav 1</li>
            <li>Nav 2</li>
            <li>Nav 3</li>
        </ul>
    </div>
    
    <div id="content">
    </div>

    CSS

    html, body {
        height:100%;
        margin: 0;
        padding: 0;
        border: 0;
    }
    
    #content {
        height:100%;
        width: calc(100% - 200px);
        display: inline-block;
        background-color: #DDF;
    }
    
    #navbar{
        height:100%;
        width:200px;
        float: left;
        background-color: #CEC;
    }
    • wow esto es realmente una buena solución, no sabía acerca de la calc! Funciona con todos los navegadores, por ejemplo, IE7 o incluso 6?
    • la compatibilidad es ie9+ (caniuse.com/#feat=calc)
    • IE6? En serio. Funciona en IE9+.
  2. 4

    http://jsfiddle.net/gXubX/2/

    .container { 
        width: 100%;
        background: fuchsia;
    }
    
    .left {
        width: 200px;
        float: left;
        background: purple;
        min-height: 300px;
    }

    Y un clearfix aplicado al contenedor.

    • Hola, puedo explicar a mí un poco de lo que es clearfix?
    • clearfix
    • He probado tu sugerencia, pero tengo todavía un margen en la parte superior y ahora también en la parte inferior jsfiddle.net/tqEfS/1
    • actualizado el violín
    • gracias pero eso no soluciono mi problema con el 100% de la altura y la barra de desplazamiento vertical que me estoy poniendo…mira en la parte inferior de la página, esto debe ser una línea recta jsfiddle.net/tqEfS/2
    • Lo siento, no lo entiendo…yo quiero que el contenido y la barra lateral al 100% de la altura! Este no es el caso en su violín, min-height: 300px;
    • Si puedo configurar el desbordamiento oculto funciona, así que voy a aceptar tu respuesta 😉 y gracias por su ayuda
    • Yo no se necesita el contenedor con el 100% de la altura, esto funciona: jsfiddle.net/gXubX/4

  3. 1

    CSS:

      #wrapper {
     width: 100%;
     float: left;
     positon: relative;
     }
    
     #navbar {
     width: 200px;
     float: left;
     top: 0px;
     left: 0px;
     position: absolute;
        height: 300px;
    background-color: red;
    z-index: 2;
     }
    
      #content-wrapper {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 300px;
     float: left;
     background-color: blue;
    z-index: 1;
     }
    
      #content {
    left: 200px;
    margin-left: 200px;
    background-color: green;
    z-index: 3;
    color: white;
    }

    HTML

    <div id="wrapper">
    <div id="navbar"></div>
    <div id="content-wrapper">
        <div id="content">
            asdfasfdasdfasdg asdga sdgasdg asdgasdgasdgasdg
        </div>
    </div>
    </div>
    • No quiero que la barra de navegación, para ser dinámico, debe tener un ancho fijo
    • se fija correctamente arriba 😉
    • de cerca, pero que conduce a una barra de desplazamiento horizontal :-/
    • oh, voy a intentar su corrección 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here