我如何让我的侧栏一直延伸到最后？ [英] How do I make my side column extend all the way to the end?
问题描述
对于我的网站，我无法让我的侧栏一直延伸到身体栏的末端，而没有给它一个固定的最大高度（它应该根据身体的长度进行调整，或者通过身体的字数/内容和/或身体在更小的屏幕中的包裹）。请记住，我在底部有一个页脚，应占据屏幕的整个宽度，所以我不能做任何让侧栏比任何东西都长的东西，并将所有其他内容保留在主体栏中。
以下是我的示例： https://jsfiddle.net / r7g20fvk /
以下是代码：
<风格>
.sidebar_container {
float：right;
宽度：70％;
最大宽度：230px;
margin：0px 20px 20px 0;
min-width：300px;
/ *我可以添加最小高度，直到边栏足够长以达到整个底部而不是在内容用完后结束，但不会相应地进行调整（与主体列的长度相符， * /
}
.left {
溢出：隐藏宽度：70％;无论屏幕是否让人体变长或文字数量变得更长。
line-height：2;
font-size：18px;
}
< / style>
< div class =left>
< h2>主页< / h2>
< / div>
< div>
< div class =sidebar_containerstyle =float：right;>
< div class =sidebar>
< h2> Post 1< / h2>
< p> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Morbi fringilla vulputate mauris fermentum laoreet。 Suspendisse lacinia tincidunt lectus ...
< a href =＃>阅读更多< / a>
< / p>
< / div>
< div class =sidebar>
< h2> Post 2< / h2>
< p> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Morbi fringilla vulputate mauris fermentum laoreet。 < a href =＃>阅读更多内容< / a>< / p>
< / div>
< div class =sidebar>
< h2> Post 3< / h2>
< p> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Morbi fringilla vulputate mauris fermentum laoreet。在iaculis neque aliquam vitae悬吊拉丁美洲仙人掌。 Ut mattis aliquet mi，eu cursus est placerat id。 Donec vehicula lorem
neque，vel mattis arcu semp ...< a href =＃>阅读更多< / a>< / p>
< / div>
<！ - close sidebar - >
< / div>
< div class =left>
Lorem ipsum dolor坐amet，consectetur adipiscing elit。 Morbi fringilla vulputate mauris fermentum laoreet。在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。在eget congue sapien，在semper ligula。 Curabitur sagittis mi lacinia fermentum。 Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Morbi eu enim a mauris ullamcorper
tincidunt ac vel erat。 Pellentesque栖息地morbi tristique senectus et netus et malesuada fames ac turpis egestas。斜纹夜蛾，vel inter草，la maxim草，fe fe草等。 Nunc molestie libero
quis odio tristique euismod.Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Morbi fringilla vulputate mauris fermentum laoreet。在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。在eget congue sapien，在semper ligula。 Curabitur sagittis mi lacinia fermentum。 Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Morbi eu
可以帮助您解决问题。 Pellentesque栖息地morbi tristique senectus et netus et malesuada fames ac turpis egestas。斜纹夜蛾，vel inter草，la maxim草，fe fe草等。
Nunc molestie libero quis odio tristique euismod。< / p>
< / div>
< / div>
有没有办法让它相应调整？也许让侧栏的宽度占整个屏幕宽度的百分比，以便在较小屏幕尺寸下观看时不是固定宽度，或者在超小型移动屏幕中使其完全消失或出现某种情况。我正在尝试使其移动友好和基于底部调整其高度。
你认为制作一张桌子（有两列，一个是身体，一个是侧面）是让网页移动更友好并自动适应的更好方式内容的包装？或者有没有更好的方法使用div分组？
类似这样的事情： https://jsfiddle.net/xcy9s64g/
诀窍是定位正确的孩子 div 绝对：
position：absolute;
right：0;
top：0;
当然，将父容器定位为相对位置，为绝对定位提供参考点。然后，您可以为孩子使用百分比。
#container {
position：relative;
宽度：100％;
}
您认为制作一张桌子列，其中一个作为正文，另一个作为
一边）将是使网页移动友好
并自动适应内容包装的更好方式？或者有更好的方式使用div分组？
使用表格进行布局是个不错的主意。如果您想尝试不同的东西，请使用 flexbox 。
For my website, I can't get my side column to extend all the way to the end of the body column without giving it a fixed max height (it's supposed to adjust according to the length of the body, which is altered either by the amount of words/content the body has and/or the wrapping of the body in a smaller screen). Please keep in mind that I have a footer at the bottom that is supposed to take up the entire width of the screen so I can't do something that makes the side column longer than anything and keep everything else on the body column.
Here is my example: https://jsfiddle.net/r7g20fvk/
Here is the code:
<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>
Is there a way to make it adjust accordingly? Perhaps make the side column's width be a percentage of the entire width of the screen so it isn't a fixed width when viewing at a smaller screen size, or make it completely disappear or something when in super-small mobile screens. I'm trying to make it mobile friendly and adjust its height based off of the bottom.
Do you think making a table (with two columns, one as body and one on the side) would be a better way of making the webpage mobile friendly and automatically adjust to the wrapping of content? Or is there a better way using div grouping?
Something like this?: https://jsfiddle.net/xcy9s64g/
The trick is to position the right child div absolutely:
position: absolute;
right: 0;
top: 0;
And, of course, positioning the parent container as relative, to provide a reference point for the absolute positioning. Then, you can use percentages for the children.
#container {
position: relative;
width: 100%;
}
Do you think making a table (with two columns, one as body and one on the side) would be a better way of making the webpage mobile friendly and automatically adjust to the wrapping of content? Or is there a better way using div grouping?
Using a table for layout is a bad idea. Use flexbox instead if you want to try something different.
这篇关于我如何让我的侧栏一直延伸到最后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
