¿Cómo-para mezclar fijos y porcentuales alturas/ancho usando css sin javascript

que quiero lograr un diseño como este:¿Cómo-para mezclar fijos y porcentuales alturas/ancho usando css sin javascript

----------------------------------------------------------- 
|               | 
| fixed height           | 
|               | 
|----------------------------------------------------------| 
|              | s | 
| takes all the rest available screen height   | c | 
| fluid height, not fixed,        | r | 
| dependent on the screen height      | o | 
|              | l | 
|              | l | 
|              | b | 
|              | a | 
|              | r | 
------------------------------------------------------------

el uso de CSS y HTML, sin javascript, ¿es posible? La barra de desplazamiento debe ser completamente visible, de arriba a abajo.

Fuente

2011-07-18 fedor_bel

Ver:http://jsfiddle.net/s7FH6/show/ (edit)

HTML:

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

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    overflow: hidden 
} 
#header { 
    background: #ccc; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 150px 
} 
#content { 
    background: #eee; 
    position: absolute; 
    left: 0; 
    top: 150px; 
    bottom: 0; 
    width: 100%; 
    overflow-y: scroll 
}

Fuente

2011-07-18 12:15:16 thirtydot

¡Esta es la respuesta correcta a la pregunta! y debo marcarlo como absolutamente correcto para las condiciones dadas. –

Malo para mí, justo cuando leí la respuesta, me vino a la mente que quería que la altura del panel superior no se fijara, sino que su tamaño debería depender del contenido. Perdón por no mencionarlo en las condiciones - mi mal. Supongo que si agregamos esa condición adicional, no habrá una solución pura de html/css. Comenzaré una nueva pregunta con esa condición adicional. –

vea una nueva pregunta aquí http://stackoverflow.com/questions/6733015/how-to-mix-fixed-and-percentage-height-width-using-css-without-javascript –

-1

se puede lograr el diseño de esa manera muy simple para ser honesto simplemente leer sobre divs y un poco de CSS aquí hay un ejemplo:

<div style="width: 604px; height: 405px; border: solid 1px black;"> 
<div style="width: 100%; height: 100px; border: solid 1px green;"></div> 
<div style="width: 100%; height: 74%; border: solid 1px blue;"></div> 
</div>

No se olvide que el ancho: 604px es única, por ejemplo, acaba de establecer a 100 % para usar todo el tamaño de pantalla, igual para la altura.

buena suerte.

ejemplo: http://jsfiddle.net/DCbur/2/

No se olvide de votar si te gusta la respuesta

Fuente

2011-07-18 11:18:40

Querido Villi, gracias por responder. Perdón por no ser 100% claro. El panel inferior debe tener una altura flexible, tomando todo el resto del espacio de la pantalla. –

así que solo agregue el ancho: 100%; –

Willi, estoy hablando de ALTURA del panel inferior tomando todo el resto disponible ALTURA DE LA PANTALLA. –

¿Cómo-para mezclar fijos y porcentuales alturas/ancho usando css sin javascript

Respuesta

Cuestiones relacionadas