Div ancho fijo en la izquierda y div ancho fluido en la derecha

Question

Quiero tener un ancho fijo de <div> a la izquierda, y <div> flexible a la derecha para cuando la ventana cambia de tamaño. También, La izquierda <div> es plegable (Yo uso jQuery para ocultarlo con margen negativo), Entonces necesito el <div> derecho para tener todo el ancho.

PS: No estoy siendo capaz de tener un 100% div anchura interior de un contenedor con relleno sin tener rollos horizontales ...

Answer 1

Quiero tener un ancho fijo en la izquierda, y una flexibilidad en la adecuado para cuando cambia el tamaño de la ventana.

float: left sólo el izquierdo div, y añadir overflow: hidden a la derecha div.

Ver:http://jsfiddle.net/JsLuG/

Además, la izquierda es plegable (I usar jQuery para ocultarlo con margen negativo ), entonces necesito la derecha tener el ancho completo.

que trabaja con mi método: http://jsfiddle.net/JsLuG/1/

PS: No estoy siendo capaz de tener un 100% div anchura interior de un contenedor con de relleno sin tener horizontales rollos ...

Eso es porque width: 100% no incluye padding.

Ver: http://css-tricks.com/2841-the-css-box-model/

La forma más sencilla de evitar esto es no declarar width: 100%. Un elemento de nivel de bloque tomará por defecto el "ancho completo" (width: auto).

O, agregue un elemento de envoltura y ponga el padding en eso. O bien, use box-sizing: border-box.

Answer 2

Sólo hay que establecer el margen izquierda de la div derecho a ser el ancho de la div izquierda Cuando ejecutas el script para colapsar el div izquierdo, tendrás que ajustar el margen del derecho-div.

http://jsfiddle.net/vpKfn/

Answer 3

Este es un buen caso de uso para el uso de postion:fixed; El ejemplo a continuación le ayudará a empezar. fácilmente podría hacer diferentes clases para cuando la barra lateral está oculta y simplemente cambiar las clases en los divs para usar diferentes valores de posición.

HTML

<div class="sidebar">side stuff</div> 
<div class="main">main content</div> 

CSS

.sidebar{ 
    background-color:#CCC; 
    position:fixed; 
    left:0; 
    top:0; 
    bottom:0; 
    width:150px; 
} 

.main{ 
    background-color:#AAA; 
    position:fixed; 
    left:150px; 
    top:0; 
    bottom:0; 
    right:0; 
}