サイドバーの高さをメインのコンテンツボックスに合わせるにはどうすればよいですか？

Question

私は非常に初心者、私はGoogleで検索を行ったが、適切な答えを得ることができませんでした。 Iveは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

フレックスボックスを使用してこれを達成できます。しかし、可能であれば、あなたのHTMLにいくつかの変更を加えます...

サイドバーとコンテンツを横に並べます。そしてあなたがそれをしている間、その行の中で彼らの位置を交換してください。

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

そして、単に.rowにdisplay: flexを追加します。

追加したmarginプロパティの一部を削除することで、CSSをさらに単純化することができます。

サイドバーの幅を尊重するには、widthの代わりにmin-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>

*クロスブラウザのサポートのためのフレキシボックスで、ベンダープレフィックスを使用してください。

Answer 2

あなたはフレキシボックスのプロパティを使用することがあります。

• display:flex CSSグリッドシステムを。最終的にここに便利なサイズとセットボックスの動作
• calc()にページ方向
• flex : 1 0 XX、ない、右側に右のバーを設定する流れを逆にする
• flex-flow:row-reverse。

.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>

---

あなたはフレックスプロパティを使用したくない場合は、

あなたはテーブルのプロパティを使用することができますが、ボックスのそれぞれのカップルがします一緒に包まれる必要があります。

• display:table;、display:table-row;、セットおよびリセットするdisplay:table-cell;
• table-layout:fixed + width
• 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>