CSSによる自動高さ、または「高さの塗りつぶし/マッチング」？

Question

私は最良のアプローチがここにあるかどうかはわかりませんが、これが問題です：

私のコンテンツ用の2つの列を生成するために応答型の列を使用します。左側のdivはログインペインで、右側のdivはシステムアナウンスペインです。デフォルトでは、高さが設定されていないので、左側のdivは、コンテンツがintの場合と同じように背が高く、右側のdivは5つのシステムアナウンスがあるため、もっと大きくなります。

私が望むのは、ログインページが、ページをスクロールせずに1つの表示領域にすべての情報を含むことです。このためには、システムアナウンスの高さの値を何らかの値、例えばwidth:50vhに設定してからoverflow-y:autoに設定します。これにはアナウンスが含まれています。

高さが一致するように、width:50vhを.colクラスに設定します。しかし、私はこのコラムの中にいくつかのディビジョンを持っていますが、ディビジョンの外側には基本的にこぼれてしまいます。私は何とか自動的に設定されると思う高さが好きですが、私が望む高さにするか、または左のdivのコンテンツを適切に "塗りつぶす"ようにしますか？最良のアプローチが何であるかはわかりません。

コード：

<div id="information"> 
    <div class="container" style="padding-top:0px;"> 
     <a href="http://linkremoved.com"><img src="http://linkremoved.com"></a> 
    </div> 
</div> 
<div id="loginPageContainer"> 
    <loginUI:errorMessage /> 
    <div class="container"> 
     <div id="login" class="section group"> 
     <div class="col span_1_of_2"> 
      <div id="loginPic"> 
       <img src="https://linkremoved.com"> 
      </div> 
      <div id="loginBox"> 
       <loginUI:loginForm /> 
       <div id="loginLinksContainer" class="loginlinkssection loginlinksgroup"> 
        <div class="loginlinkscol loginlinksspan_1_of_2"> 
        <a href='https://linkremoved.com'>Verify Your User Name</a> 
        </div> 
        <div class="loginlinkscol loginlinksspan_1_of_2"> 
        <a href='http://linkremoved.com'>Reset Your Password</a> 
        </div> 
       </div> 
       <div id="helpfulText" class="helpfultextsection helpfultextgroup"> 
        <div class="helpfultextcol helpfultextspan_1_of_2"> 
        Your WebAdvisor username is also your Blackboard username. If you are unable to login, click the Password Reset link below to find the best solution for resetting your password. 
        </div> 
        <div class="helpfultextcol helpfultextspan_1_of_2"> 
        * You will not see your course within your Course List in Blackboard until the official start date (review your class schedule). 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col span_1_of_2"> 
      <loginUI:systemAnnouncements maxItems="5" /> 
     </div> 
     </div> 
    </div> 
</div> 

CSS：

#loginPic img{ 
max-width: 100%; 
height: auto; 
} 

#loginAnnouncements { overflow-y: auto; 
height: 50vh; 
padding:0;} 

#loginRedirectProviders {display: none;} 

#loginHeader {display:none !important;} 

#loginErrorMessage { margin-bottom: -7px !important; border-radius: 0px !important; } 

.container { width: 67%; margin: 0 auto; background-color:transparent !important; } 

#loginPane { float: left; /*Change this width as required or split this for each pane if need different widths */ } 

#loginHeader ul li { margin: 7px 0 0 -4px; } 

#loginHeader ul li a { padding: 2px 12px; height: 22px;} 

#topLinks { background: #c10435; padding-top: 7px; height: 34px; text-align:center;} 

#topLinks li { display:inline; list-style: none; padding-right: 20px; } 

#topLinks li a {color: white; font-size: 16px; padding-top: 6px; padding-bottom: 10px; padding-left: 10px; padding-right: 11px; font-family: "Titillium Web", Arial, sans-serif;} 

#topLinks li a:hover { transition-duration: 0.2s; transition-timing-function: ease; background-color: rgb(141,10,10); } 

#information { background: white; height: 61px; padding-top:7px; padding-bottom:26px; 
    /*background: url("http://edtech.com.edu/wp-content/uploads/2015/05/edtechbanner3.png") no-repeat top left 284px;*/ } 

#information li { display:inline; list-style: none; } 

#information li a {color: white; font-size: 16px; font-family: "Titillium Web", Arial, sans-serif;} 

#loginContainer .loginBody { } 

#loginPageContainer {background: #eaeaea;display:table;width: 100%;text-align:center; min-height:58% !important;padding-top: 10px;padding-bottom:21px;height: 569px;zoom:1 -webkit-box-shadow: 0px 3px 23px 6px rgba(239,170,35,0.75); -moz-box-shadow: 0px 3px 23px 6px rgba(239,170,35,0.75); box-shadow: 0px 3px 23px 6px rgba(239,170,35,0.75);} 

.login-page #copyright .logo {display:none !important;} 

.newCopyright {display: block !important; text-align: center;} 


#copyright { display: block; } 

.login-page {background: white !important;} 

.login-page #copyright {margin-top: 18px !important; bottom:0px !important; color:black !important; position: inherit !important; } 

#loginBox #loginFormFields {margin-top:-5px;} 

.loginBody { padding: 0 !important; background-position-y:33px !important; /*background: url("https://com-mig.blackboard.com/bbcswebdav/institution/Branding/Bb_learn_small.png") no-repeat scroll 94px 23px transparent !important;*/ 
    } 

    body.login-page {} 

    .receipt.good { 
      margin: 0 auto 16px; 
    padding: 12px 27px 14px 19px !important; 
    width: 366px !important; 
    position: absolute !important; 
    left: 720px !important; 
    top: 652px !important; 
    } 

#loginBox ul {width:inherit !important;} 
#loginAnnouncements ul {width:inherit !important;} 

/* Target Firefox only */ 
@-moz-document url-prefix() { 
    #seeClasses { 
    padding-bottom:20px; 
    } 
} 

/* SECTIONS */ 
.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* COLUMN SETUP */ 
.col { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 1.6%; 
    background:white; 
} 
.col:first-child { margin-left: 0; } 

/* GROUPING */ 
.group:before, 
.group:after { content:""; display:table; } 
.group:after { clear:both;} 
.group { zoom:1; /* For IE 6/7 */ } 
/* GRID OF TWO */ 
.span_2_of_2 { 
    width: 100%; 
} 
.span_1_of_2 { 
    width: 49.2%; 
} 

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .col { 
     margin: 1% 0 1% 0%; 
    } 
} 

@media only screen and (max-width: 480px) { 
    .span_2_of_2, .span_1_of_2 { width: 100%; } 
} 

#loginLinksContainer 
{text-align:center;} 

#loginLinksContainer a {color:white !important;} 

.loginlinkssection { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* COLUMN SETUP */ 
.loginlinkscol { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 1.6%;  
    background-color: #c10435; 
    color: white; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
.loginlinkscol:first-child { margin-left: 0; } 

/* GROUPING */ 
.loginlinksgroup:before, 
.loginlinksgroup:after { content:""; display:table; } 
.loginlinksgroup:after { clear:both;} 
.loginlinksgroup { zoom:1; /* For IE 6/7 */ } 
/* GRID OF TWO */ 
.loginlinksspan_2_of_2 { 
    width: 100%; 
} 
.loginlinksspan_1_of_2 { 
    width: 49.2%; 
} 

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .loginlinkscol { 
     margin: 1% 0 1% 0%; 

    } 
} 

@media only screen and (max-width: 480px) { 
    .loginlinksspan_2_of_2, .loginlinksspan_1_of_2 { width: 100%; } 
} 

/* #helpfulText columns */ 
/* SECTIONS */ 
.helpfultextsection { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* COLUMN SETUP */ 
.helpfultextcol { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 1.6%; 
    background-color: #c10435; 
    color: white; 
} 
.helpfultextcol:first-child { margin-left: 0; } 

/* GROUPING */ 
.helpfultextgroup:before, 
.helpfultextgroup:after { content:""; display:table; } 
.helpfultextgroup:after { clear:both;} 
.helpfultextgroup { zoom:1; /* For IE 6/7 */ } 
/* GRID OF TWO */ 
.helpfultextspan_2_of_2 { 
    width: 100%; 
} 
.helpfultextspan_1_of_2 { 
    width: 49.2%; 
} 

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .helpfultextcol { 
     margin: 1% 0 1% 0%; 
    } 
} 

@media only screen and (max-width: 480px) { 
    .helpfultextspan_2_of_2, .helpfultextspan_1_of_2 { width: 100%; } 
} 

Answer 1

使用フレキシボックス。

#helpfulText{ 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: flex; 
} 

高さは左右の要素が同じになります。 Fiddle