html - frase - apparicio fernando de brinkerhoff

¿Cómo hago que mi columna lateral se extienda hasta el final?

Question

Para mi sitio web, no puedo hacer que mi columna lateral se extienda hasta el final de la columna del cuerpo sin darle una altura máxima fija (se supone que debe ajustarse de acuerdo con la longitud del cuerpo, que es alterada por el cantidad de palabras / contenido que tiene el cuerpo y / o envoltura del cuerpo en una pantalla más pequeña). Tenga en cuenta que tengo un pie de página en la parte inferior que se supone ocupa todo el ancho de la pantalla, así que no puedo hacer algo que haga que la columna lateral sea más larga que cualquier otra cosa y que guarde todo lo demás en la columna del cuerpo.

Aquí está mi ejemplo: https://jsfiddle.net/r7g20fvk/

Aquí está el código:

<style>
.sidebar_container {
float: right;
width: 70%;
max-width: 230px;
margin: 0px 20px 20px 0;
min-width: 300px;
/*I can add a min-height until the side column is long enough to reach the entire bottom rather than end after the content runs out, but it doesn''t adjust accordingly (to the length of the body column, whether the screen makes the body longer or the amount of text makes the body longer)*/
}
.left {
overflow: hidden width: 70%;
line-height: 2;
font-size: 18px;
}
</style>
<div class="left">
<h2>Home</h2>
</div>
<div>
<div class="sidebar_container" style="float: right;">
<div class="sidebar">
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
<a href="#">Read More</a>
</p>
</div>
<div class="sidebar">
<h2>Post 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus.. <a href="#">Read More</a></p>
</div>
<div class="sidebar">
<h2>Post 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem
neque, vel mattis arcu semper in...<a href="#">Read More</a></p>
</div>
<!--close sidebar-->
</div>
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem
neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu enim a mauris ullamcorper
tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris. Nunc molestie libero
quis odio tristique euismod.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat
id. Donec vehicula lorem neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu
enim a mauris ullamcorper tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris.
Nunc molestie libero quis odio tristique euismod.</p>
</div>
</div>

¿Hay alguna manera de hacer que se ajuste en consecuencia? Tal vez el ancho de la columna lateral sea un porcentaje de todo el ancho de la pantalla para que no tenga un ancho fijo cuando se visualice en un tamaño de pantalla más pequeño, o desaparezca por completo o algo así cuando se encuentre en pantallas móviles súper pequeñas. Intento que sea amigable para dispositivos móviles y ajustar su altura desde el fondo.

¿Crees que crear una mesa (con dos columnas, una como cuerpo y una lateral) sería una mejor manera de hacer que la página web sea amigable para dispositivos móviles y se ajuste automáticamente a la envoltura del contenido? ¿O hay una forma mejor de usar div grouping?

Answer 1

¿Algo como esto ?: https://jsfiddle.net/xcy9s64g/

El truco es posicionar al div hijo correcto absolutamente:

position: absolute;
right: 0;
top: 0;

Y, por supuesto, posicionar el contenedor principal como relativo, para proporcionar un punto de referencia para el posicionamiento absoluto. Entonces, puedes usar porcentajes para los niños.

 #container {
position: relative;
width: 100%;
}

¿Crees que crear una mesa (con dos columnas, una como cuerpo y una lateral) sería una mejor manera de hacer que la página web sea amigable para dispositivos móviles y se ajuste automáticamente a la envoltura del contenido? ¿O hay una forma mejor de usar div grouping?

Usar una tabla para el diseño es una mala idea. Use flexbox en su lugar si quiere probar algo diferente.

Answer 2

Creo que deberías usar flexbox, espero que resuelva tu problema.

Por favor revisa esta solución de codepen

body {
background: #eee;
}
section {
padding: 10px;
}
h2 {
margin: 0;
padding: 0;
display: inline-block;
}
.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.main-container {
background: #fff;
margin: 10px;
display: flex;
/*flex-wrap: wrap;*/
/*justify-content: space-between;*/
}
.left-container {
flex: 3 3 70%;
background-color: #fff;
}
.right-container {
flex: 1 1 30%;
flex-direction: column;
background-color: #ccc;
}
@media screen and (max-width:768px) {
.main-container {
display: flex;
flex-wrap: wrap;
}
.left-container {
flex: 0 1 100%;
order: 1;
/*change the order of the blocks for smaller screens as you like */
background-color: #fff;
}
.right-container {
flex: 0 1 100%;
order: 2;
/*change the order of the blocks for smaller screens as you like */
background-color: #ccc;
}
}

<body>
<div class="wrapper">
<div class="main-container">
<section class="left-container">
<h2>Home</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem neque,
vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu enim a mauris ullamcorper tincidunt
ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris. Nunc molestie libero quis odio
tristique euismod.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat
id. Donec vehicula lorem neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
eu enim a mauris ullamcorper tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus
in mauris. Nunc molestie libero quis odio tristique euismod.
</p>
</section>
<section class="right-container">
<article>
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
<a href="#">Read More</a>
</p>
</article>
<article>
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
<a href="#">Read More</a>
</p>
</article>
<article>
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
<a href="#">Read More</a>
</p>
</article>
</section>
</div>
</div>
</body>