html - poner - posicion fija css
Dos columnas flotantes, una fija y otra suelta (8)
Miré alrededor, pero no puedo encontrar uno que coincida con mi ocurrencia, básicamente tengo dos columnas de ancho fijo (185px) y la otra columna no tiene ancho fijo, sin embargo, necesito la última columna para llenar el último espacio, por ejemplo
...........................................
.--------- ------------------------------.
.+ + + +.
.+ + + +.
.+ + + +.
.+ + + +.
.+ + ------------------------------.
.+ + .
.+ + .
.+ + .
.--------- .
...........................................
La primera columna siempre debe estar al 100% en la parte inferior cuando la segunda columna llena el ancho restante, ambos flotan a la left , si cambio el tamaño de la ventana del navegador, la segunda columna se muestra debajo de la primera columna. Necesito la segunda columna para completar el ancho restante y ser flexible al cambiar el tamaño de la ventana del navegador.
Al usar los márgenes negativos de este tutorial, el CSS puede verse de la siguiente manera
html, body, .container {
height:100%;
padding:0;
margin:0;
}
.container {
min-width: 300px;
}
.left {
float:left;
width: 185px;
margin-right: -185px;
height:100%;
}
.right {
margin-left:185px;
}
Bueno, la respuesta aprobada es buena, pero para aquellos que están buscando más aquí hay un enlace. Espero que encuentres esto útil. ;)
Echa un vistazo a this . No hay demos, pero he usado tutoriales de este chico antes, así que supongo que funciona bien. Deduzco del artículo que el contenido principal es líquido. El contenido lateral también puede ser líquido, pero creo que puedes darle un ancho fijo y dejarlo así. El truco aquí es colocar primero el contenido principal.
Editó la solución, esta vez usando flexbox, hizo la columna izquierda fija usando flex: 185px 0 0; luego hizo que la columna derecha creciera automáticamente usando flex-grow:1
*{
box-sizing: border-box;
}
body{
padding:0;
margin:0;
}
#container{
display:flex;
}
#left{
height: 100vh;
flex: 185px 0 0;
background-color:tomato;
}
#right{
flex-grow: 1;
}
#right > div{
background:pink;
}
<body>
<div id="container">
<div id="left"> Left </div>
<div id="right">
<div>
Right <br/>
dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf
</div>
</div>
</div>
</body>
En realidad, hay una manera más fácil de hacerlo que usar flotadores:
.container {
position: relative;
}
.left {
width: 185px;
position: absolute;
top: 0;
left: 0;
}
.right {
margin-left: 185px;
}
Había intentado casi toda la solución anterior hasta que tropecé con esto, y funciona maravillosamente para mí. Cómo hacer un div para llenar un espacio horizontal restante (un problema muy simple pero molesto para los expertos en CSS)
No estoy seguro de por qué, parece que solo necesita flotar la columna que tiene ancho fijo. El resto solo cae en el lugar.
La "posición: absoluta"; la respuesta es bastante buena, pero tiene implicaciones de navegador cruzado, especialmente si está desarrollando para IE. La mejor manera de lograr esto es la siguiente:
<html>
<head>
<style>
div.right {
float: right;
width: 200px;
}
div.left {
margin-right: 200px;
}
div.clear {
clear: both;
}
</style>
</head>
<body>
<div class="right"><!--your code here--></div>
<div class="left"><!--your code here--></div>
<div class="clear"></div>
</body>
</html>
Tenga en cuenta que el div que necesita en el lado derecho se llama primero en el HTML. Además, tenga en cuenta el borrado del flotador después de las columnas, que será útil si tiene contenido a continuación, o si hay un contenedor principal.
Si no quiere usar ni carrozas ni posicionamiento absoluto, lo más fácil que se me ocurrió fue
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
white-space: nowrap;
}
div.left {
display: inline-block;
width: 200px;
white-space: normal;
background-color: red;
vertical-align: top;
}
div.right {
display: inline-block;
white-space: normal;
background-color: green;
}
</style>
<title></title>
</head>
<body>
<div class="left">
left
</div>
<div class="right">
right
</div>
</body>
</html>