[Html] ¿Cómo hacer que un div llene un espacio horizontal restante?


Answers

El problema que encontré con la respuesta de Boushley es que si la columna de la derecha es más larga que la izquierda, simplemente se ajustará a la izquierda y continuará llenando todo el espacio. Este no es el comportamiento que estaba buscando. Después de buscar a través de muchas "soluciones" encontré este fantástico tutorial sobre la creación de tres páginas de columna.

La oferta del autor tiene tres formas diferentes, una anchura fija, una con tres columnas variables y una con columnas externas fijas y un medio de ancho variable. Mucho más elegante y efectivo que otros ejemplos que encontré. Mejorado significativamente mi comprensión del diseño de CSS.

Básicamente, en el caso simple anterior, flote la primera columna a la izquierda y dele un ancho fijo. Luego, dale a la columna de la derecha un margen izquierdo que es un poco más ancho que la primera columna. Eso es. Hecho. El código de Ala Boushley:

Aquí hay una demostración en Stack Snippets & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left">  left  </div>
<div id="right"> right </div>

Con el ejemplo de Boushley, la columna de la izquierda contiene la otra columna a la derecha. Tan pronto como la columna izquierda termina, la derecha comienza a llenar todo el espacio nuevamente. Aquí la columna de la derecha simplemente se alinea más en la página y la columna de la izquierda ocupa su gran margen de grasa. No se requieren interacciones de flujo

Question

Tengo 2 divs: uno en el lado izquierdo y otro en el lado derecho de mi página. El que está en el lado izquierdo tiene ancho fijo y quiero que el del lado derecho llene el espacio restante.

El del lado derecho es la navegación y quiero que ocupe el espacio restante en el lado derecho:

#search {
    width: 160px;
    height: 25px;
    float: left;
    background-color: #ffffff;
}
#navigation {
    width: 780px;
    float: left; 
    /*background-color: url('../images/transparent.png') ;*/
    background-color: #A53030;
}
<div id="search">Text
</div>
<?php include("navigation.html"); ?>
<div id="left-column">
</div>



He estado trabajando en este problema durante dos días y tengo una solución que puede funcionar para usted y para cualquier otra persona que intente hacer un Ancho fijo fijo de respuesta y que el lado derecho complete el resto de la pantalla sin rodear el lado izquierdo. La intención que asumo es hacer que la página responda tanto en navegadores como en dispositivos móviles.

Aquí está el código

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}
/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

Aquí está mi violín que puede funcionar para ti como lo hizo para mí. https://jsfiddle.net/Larry_Robertson/62LLjapm/




Dado que esta es una pregunta bastante popular, me inclino a compartir una buena solución usando BFC.
Codepen muestra de lo siguiente here .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

En este caso, overflow: auto desencadena el comportamiento del contexto y hace que el elemento derecho se expanda solo al ancho restante disponible y, naturalmente, se expandirá al ancho completo si .left desaparece. Un truco muy útil y limpio para muchos diseños de UI, pero tal vez sea difícil de entender el "por qué funciona" al principio.




Si intenta llenar el espacio restante en un cuadro flexible entre 2 elementos, agregue la siguiente clase a un div vacío entre los 2 que desea separar:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}






Tuve un problema similar y se me ocurrió lo siguiente, que funcionó bien

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

Este método no se ajustará cuando la ventana se reduzca, pero expandirá automáticamente el área de "contenido". Mantendrá un ancho estático para el menú del sitio (izquierda).

Y para el cuadro de contenido de expansión automática y la demostración de la caja vertical izquierda (menú del sitio):

https://jsfiddle.net/tidan/332a6qte/




Probé las soluciones anteriores para un líquido a la izquierda, y un derecho fijo pero ninguno funcionó (estoy consciente de que la pregunta es al revés, pero creo que esto es relevante). Esto es lo que funcionó:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>



/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>



.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}
<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Prueba esto. Funcionó para mí




Si no necesita compatibilidad con versiones anteriores de ciertos navegadores (IE 10 8 o menos, por ejemplo) puede usar la función CSS de calc() :

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}



Aquí hay una pequeña solución para la solución aceptada, que evita que la columna de la derecha quede debajo de la columna de la izquierda. width: 100%; reemplazado width: 100%; con overflow: hidden; una solución difícil, si alguien no lo sabía.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[edit] También verifique un ejemplo para el diseño de tres columnas: http://jsfiddle.net/MHeqG/3148/