如何获得侧栏高度以适应主内容框？

Question

我非常喜欢初学者，我在google上搜索过，但无法得到合适的答案。我做了一个2列简单的网站，我想要的是侧栏（class =“sideright”），以匹配相邻主要部分（分别）的高度。这是我可以单独使用CSS吗？

.main { 
 
    
 
    background-color: #e5e4d7; 
 
    border-radius: 5px; 
 
    margin: 10px 340px 10px 10px; 
 
    padding: 10px; 
 
    font-size: 1.1em; 
 
} 
 

 
.sideright { 
 
    background-color: #e5e4d7; 
 
    border-radius: 5px; 
 
    margin: 0px 10px 0px 10px; 
 
    padding: 10px; 
 
    font-size: 1.1em; 
 
    float: right; 
 
    width: 300px; 
 

 
}

<div class="sideright"> 
 
     <h2>Sumthing</h2> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
    </div> 
 

 

 
    <div class="main"> 
 

 
     <h1>This is a brilliant paragraph</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 

 

 
    </div> 
 
    <div class="sideright"> 
 
     <h2>Anything</h2> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
    </div> 
 

 
    <div class="main"> 
 
     <h1>This is a brilliant paragraph</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 
    </div>

Answer 1

您可以使用flexbox来实现此目的。但是，如果可能的话，我会对HTML进行一些更改...

将侧边栏和内容包装成一行。当你在它的时候，交换他们在排内的位置。

<div class="row> 
    <div class="content"></div> 
    <div class="sidebar"></div> 
</div> 

然后只需添加display: flex到.row。

然后，您可以通过删除一些已添加的margin属性来进一步简化CSS。

为确保您的边栏宽度得到尊重，请使用min-width而不是width。

CODEPEN

SNIPPET：

.row { 
 
    display: flex; 
 
} 
 

 
.main { 
 
    background-color: #e5e4d7; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    font-size: 1.1em; 
 
    margin: 10px; 
 
} 
 

 
.sideright { 
 
    background-color: #e5e4d7; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    font-size: 1.1em; 
 
    min-width: 300px; 
 
}

<div class="row"> 
 
    <div class="main"> 
 

 
    <h1>This is a brilliant paragraph</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices 
 
     diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis 
 
     non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices 
 
     diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis 
 
     non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 

 

 
    </div> 
 
    <div class="sideright"> 
 
    <h2>Sumthing</h2> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="main"> 
 

 
    <h1>This is a brilliant paragraph</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices 
 
     diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis 
 
     non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices 
 
     diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis 
 
     non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 

 

 
    </div> 
 
    <div class="sideright"> 
 
    <h2>Sumthing</h2> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    </div> 
 
</div>

*请务必使用供应商前缀与Flexbox的跨浏览器的支持。

Answer 2

您可以使用Flexbox的属性：

• display:flex CSS网格系统。
• flex-flow:row-reverse设置在右边右边栏，反向流动，而不是网页的方向
• flex : 1 0 XX大小和设置对话框行为
• calc()最终有用这里。

.main, 
 
.sideright { 
 
    background-color: #e5e4d7; 
 
    border-radius: 5px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    font-size: 1.1em; 
 
    flex:1 0 calc(100% - 380px); 
 
} 
 
.sideright { 
 
    flex: 1 0 300px; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-flow:row-reverse; 
 
    width:100%; 
 
    margin:0; 
 
}

<div class="sideright"> 
 
     <h2>Sumthing</h2> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
    </div> 
 

 

 
    <div class="main"> 
 

 
     <h1>This is a brilliant paragraph</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 

 

 
    </div> 
 
    <div class="sideright"> 
 
     <h2>Anything</h2> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
     <p>sum</p> 
 
    </div> 
 

 
    <div class="main"> 
 
     <h1>This is a brilliant paragraph</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula. </p> 
 
    </div>

---

如果你不想使用Flex性能，

您可以使用表属性，但每对夫妇的箱子会需要被包装在一起。

• display:table;，display:table-row;，display:table-cell;
• table-layout:fixedwidth +
• border-spacing代替margin
• direction设置和重置...方向

.main, 
 
.sideright { 
 
    background-color: #e5e4d7; 
 
    border-radius: 5px; 
 
/* margin: 10px; use border-spacing instead */ 
 
    padding: 10px; 
 
    font-size: 1.1em; 
 
    direction: ltr;/* reset flow to left to right */ 
 
    display: table-cell; 
 
} 
 
.sideright { 
 
    width: 300px; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
body { 
 
    display: table; 
 
    table-layout: fixed;/* make sure it won't expand */ 
 
    width: 100%; 
 
    margin: 0; 
 
    border-spacing: 10px;/* instead margin unavalaible for the children boxes */ 
 
    direction: rtl;/* reverse flow direction */ 
 
}

<div class="row"> 
 
    <div class="sideright"> 
 
    <h2>Sumthing</h2> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    </div> 
 

 

 
    <div class="main"> 
 

 
    <h1>This is a brilliant paragraph</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices 
 
     diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis 
 
     non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula.</p> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices 
 
     diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis 
 
     non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula.</p> 
 

 

 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="sideright"> 
 
    <h2>Anything</h2> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    <p>sum</p> 
 
    </div> 
 

 
    <div class="main"> 
 
    <h1>This is a brilliant paragraph</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices 
 
     diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis 
 
     non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula.</p> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nisi, congue vitae vestibulum faucibus, congue non lacus. Nulla eu ultricies leo. Sed at augue eleifend, hendrerit metus quis, pellentesque massa. Phasellus non odio ultrices 
 
     diam vestibulum eleifend. Quisque vehicula vel diam eget lobortis. Sed ut eros arcu. Phasellus vulputate lectus risus, id bibendum neque elementum placerat. Pellentesque congue mattis libero vel rutrum. Ut vel urna vitae dolor pulvinar gravida quis 
 
     non magna. Etiam eget urna eleifend, pretium purus ut, tempor sapien. Pellentesque pellentesque, libero at hendrerit malesuada, risus odio rutrum libero, id ultricies erat urna et ligula.</p> 
 
    </div> 
 
</div>