如何獲得側欄高度以適應主內容框？

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>