自动高度，或＆＃34;填充/匹配高度＆＃34;通过CSS？

时间：2017-12-13 14:24:17

标签： html css

我不确定这里最好的方法是什么，但这就是问题所在：

使用自适应列为我的内容生成两列。左侧div是登录窗格，右侧div是系统公告窗格。默认情况下，由于没有设置高度，左边的div只有高得多，但是内容很多，而右边的div要高得多，因为有5个系统公告。

我想要的是登录页面包含一个查看区域中的所有信息而不向下滚动页面。为此，我要做的是将系统公告的高度值设置为某个值，比如width:50vh然后overflow-y:auto。这包含公告。

要使两列高度匹配，我在width:50vh类上设置了.col。但是，我在这个专栏里面有一些div，基本上溢出了div，它看起来并不好看并且与其他元素重叠。我要么想要以某种方式自动设置的高度，要么是我想要的高度，要么是左边div中的内容要正确地＃34;填充＆＃34;？不确定最好的方法是什么。

代码：

<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%; }
}

1 个答案:

答案 0 :(得分：0)

使用flexbox。

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

高度和左右元素将是相同的。 Fiddle

相关问题
最新问题