对于我文档中的特定页面（页面上的文本内容未扩展到屏幕底部），div实际上是切断而不是扩展到显示屏的底部。
当我缩小时，div不会随着页面的主体而增长。我试图将其设置为100％无济于事。
你知道我在这里失踪了吗？尝试使用overflow-y属性（将其应用于＆＃34; mainContainer＆＃34;其中包含浮动的子项）也没有任何运气。
* { margin:0; padding:0; color:#25282a; }
p { font-family: 'Pt Sans', sans-serif; }
body{
background: white; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #EAE8D8 0%, #EAE8D8 50%, white 50%, white 100%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #EAE8D8 0%, #EAE8D8 50%, white 50%, white 100%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #EAE8D8 0%, #EAE8D8 50%, white 50%, white 100%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #EAE8D8 0%, #EAE8D8 50%, white 50%, white 100%);
}
html { /*height:100%;*/ }
body { /*height:100%;*/ }
.menuDiv { height:100px; width:100%; background:#25282a; margin:0 auto; }
.mainContainer { height:100%; max-width:1100px; min-width:700px; width:90%; overflow:hidden; height:100%; padding-left:20px; padding-right:20px; margin:0 auto; }
.leftDiv { height:100%; width:23%; background:#EAE8D8; float:left; }
.rightDiv { height:100%; width:74%; background:white; float:left; padding-left:3%; padding-bottom:100px; }
.leftDivContainer { width:100%; }
.menuList { max-width:1100px; min-width:700px; width:90%; margin:0 auto; }
.menuList li { font-size:23px; width:16.66%; font-family: 'Oswald', sans-serif; background:#25282a; display:block; float:left; text-align:center; }
.menuList li a { color:white; text-decoration:none; display:block; height:70px; padding-top:30px; }
.menuList li a:hover { color:#41A4EE; cursor:pointer; background:#25282a; }
.subMenu { position:absolute; z-index:100; }
.subMenu li { float:none; text-align:left; display:block; /*width:100%;*/ width:225px; }
.subMenu li a { font-family: 'Open Sans', sans-serif; font-size: 16px; height:30px; display:block; padding-right:10px; padding-left:10px; padding-top:10px; }
.subMenu li a:hover { background:#25282a; }
.job_seekers_list,.employers_list,.about_list { display:none; }
.pageHeading { font-family: 'Open Sans', sans-serif; font-size:20px; width:100%; color:#25282a; padding-top:25px; padding-bottom:7px; }
.leftList li { margin-left:20px; list-style-type:square; font-family: 'Open Sans', sans-serif; color:#24282a; font-size:16px; }
.leftList li a { text-decoration:none;}
.rightDivTitle { font-family: 'Open Sans', sans-serif; font-size:22px; font-weight:normal; color:white; background:#25282a; padding-bottom:3px; padding-left:7px; text-align:left; }
.rightDivSubtitle { font-size:18px; }
.rightDivSubtitle2 { font-size:15px; }
.rightDivSubtitle, .rightDivSubtitle2 { font-family: 'Open Sans', sans-serif; padding-bottom:8px; font-weight:bold; color:#41A4EE; text-align:left; }
.rightDivContent { /* white-space: pre-wrap; */ font-family: 'Open Sans', sans-serif; font-size:15px; margin:0 auto; }
.rightDivList li { font-family: 'Open Sans', sans-serif; margin-left:20px; list-style-type:square; font-size:15px; }
.rightDivContentTable { width:100%; }
.rightDivContentTable td{ font-family: 'Open Sans', sans-serif; font-size: 15px; width:24%; }<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="test_css.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="core_serv.js"></script>
</head>
<body>
<div class="menuDiv">
<ul class="menuList">
<li> <a href="home">HOME</a> </li>
<li class="job_seekers_opt">
<a href="#">JOB SEEKERS</a>
<ul class="job_seekers_list subMenu">
<li> <a href="search_jobs">Search Jobs</a> </li>
<li> <a href="seek_bus_units">Our Business Units</a> </li>
<li> <a href="tips">Tips</a> </li>
<li> <a href="send_resume">Send Us Your Resume</a> </li>
</ul>
</li>
<li> <a href="faq">FAQ</a> </li>
<li class="employers_opt">
<a href="#">EMPLOYERS</a>
<!--<a href=/employers>EMPLOYERS</a>-->
<ul class="employers_list subMenu">
<li> <a href="emp_bus_units">Business Units & Recruitment Expertise</a> </li>
<li> <a href="staffing_opts">Staffing Options</a> </li>
<li> <a href="emp_company_lit">Company Literature</a> </li>
<li> <a href="testimonials">Testimonials</a> </li>
<li> <a href="emp_contact">Contact</a> </li>
<li> <a href="industries_serviced">Industries Serviced</a> </li>
</ul>
</li>
<li class="about_opt">
<a href="#">ABOUT</a>
<ul class="about_list subMenu">
<li> <a href="company_prof">Company Profile</a> </li>
<li> <a href="mission_statement">Mission Statement</a> </li>
<li> <a href="privacy_policy">Privacy Policy</a> </li>
<li> <a href="about_company_lit">Company Literature</a> </li>
<li> <a href="casl_compliance">CASL Compliance</a> </li>
<li> <a href="accessibility">Accessiblity</a> </li>
</ul>
</li>
<li> <a href="contact">CONTACT</a> </li>
</ul>
</div>
<div class="mainContainer">
<div class="leftDiv">
<h1 class="pageHeading"> Our Business Units</h1>
<ul class="leftList">
<li><a href="search_jobs">Search Jobs</a></li>
<li><a href="seek_bus_units">Our Business Units</a></li>
<li><a href="tips">Tips</a></li>
<li><a href="send_resume">Send Us Your Resume</a></li>
</ul>
</div>
<div class="rightDiv">
<br/><br/>
<h1 class="rightDivTitle">Our Business Units</h1>
<br/><br/>
<p class="rightDivContent">
Our recruitment and staffing consultants have experience placing professionals in the following areas:
<br/>
<br/>
<ul class="rightDivList">
<li>Engineering</li>
<li>Executive and Management</li>
<li>Information Technology</li>
<li>Insurance and Financial</li>
<li>Light Industrial</li>
<li>Technical and Operations</li>
</ul>
</p>
</div>
</div>
</body>
</html>
由于
答案 0 :(得分：0)
使用容器将要显示的内容包装在页面大小上，然后将此容器的高度和宽度设置为100vh。 vh属性获取页面显示位置的视口，并自动调整。
答案 1 :(得分：0)
取消注释
html { /*height:100%;*/ }
body { /*height:100%;*/ }
并将height: 100%替换为min-height: 100%
#mainContainer
* { margin:0; padding:0; color:#25282a; }
p { font-family: 'Pt Sans', sans-serif; }
body{
background: white; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #EAE8D8 0%, #EAE8D8 50%, white 50%, white 100%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #EAE8D8 0%, #EAE8D8 50%, white 50%, white 100%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #EAE8D8 0%, #EAE8D8 50%, white 50%, white 100%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #EAE8D8 0%, #EAE8D8 50%, white 50%, white 100%);
}
html { height:100%; }
body { height:100%; }
.menuDiv { height:100px; width:100%; background:#25282a; margin:0 auto; }
.mainContainer { min-height: calc(100% - 100px); max-width:1100px; min-width:700px; width:90%; height:100%; padding-left:20px; padding-right:20px; margin:0 auto; }
.leftDiv { height:100%; width:23%; background:#EAE8D8; float:left; }
.rightDiv { height:100%; width:74%; background:white; float:left; padding-left:3%; padding-bottom:100px; }
.leftDivContainer { width:100%; }
.menuList { max-width:1100px; min-width:700px; width:90%; margin:0 auto; }
.menuList li { font-size:23px; width:16.66%; font-family: 'Oswald', sans-serif; background:#25282a; display:block; float:left; text-align:center; }
.menuList li a { color:white; text-decoration:none; display:block; height:70px; padding-top:30px; }
.menuList li a:hover { color:#41A4EE; cursor:pointer; background:#25282a; }
.subMenu { position:absolute; z-index:100; }
.subMenu li { float:none; text-align:left; display:block; /*width:100%;*/ width:225px; }
.subMenu li a { font-family: 'Open Sans', sans-serif; font-size: 16px; height:30px; display:block; padding-right:10px; padding-left:10px; padding-top:10px; }
.subMenu li a:hover { background:#25282a; }
.job_seekers_list,.employers_list,.about_list { display:none; }
.pageHeading { font-family: 'Open Sans', sans-serif; font-size:20px; width:100%; color:#25282a; padding-top:25px; padding-bottom:7px; }
.leftList li { margin-left:20px; list-style-type:square; font-family: 'Open Sans', sans-serif; color:#24282a; font-size:16px; }
.leftList li a { text-decoration:none;}
.rightDivTitle { font-family: 'Open Sans', sans-serif; font-size:22px; font-weight:normal; color:white; background:#25282a; padding-bottom:3px; padding-left:7px; text-align:left; }
.rightDivSubtitle { font-size:18px; }
.rightDivSubtitle2 { font-size:15px; }
.rightDivSubtitle, .rightDivSubtitle2 { font-family: 'Open Sans', sans-serif; padding-bottom:8px; font-weight:bold; color:#41A4EE; text-align:left; }
.rightDivContent { /* white-space: pre-wrap; */ font-family: 'Open Sans', sans-serif; font-size:15px; margin:0 auto; }
.rightDivList li { font-family: 'Open Sans', sans-serif; margin-left:20px; list-style-type:square; font-size:15px; }
.rightDivContentTable { width:100%; }
.rightDivContentTable td{ font-family: 'Open Sans', sans-serif; font-size: 15px; width:24%; }<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="test_css.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="core_serv.js"></script>
</head>
<body>
<div class="menuDiv">
<ul class="menuList">
<li> <a href="home">HOME</a> </li>
<li class="job_seekers_opt">
<a href="#">JOB SEEKERS</a>
<ul class="job_seekers_list subMenu">
<li> <a href="search_jobs">Search Jobs</a> </li>
<li> <a href="seek_bus_units">Our Business Units</a> </li>
<li> <a href="tips">Tips</a> </li>
<li> <a href="send_resume">Send Us Your Resume</a> </li>
</ul>
</li>
<li> <a href="faq">FAQ</a> </li>
<li class="employers_opt">
<a href="#">EMPLOYERS</a>
<!--<a href=/employers>EMPLOYERS</a>-->
<ul class="employers_list subMenu">
<li> <a href="emp_bus_units">Business Units & Recruitment Expertise</a> </li>
<li> <a href="staffing_opts">Staffing Options</a> </li>
<li> <a href="emp_company_lit">Company Literature</a> </li>
<li> <a href="testimonials">Testimonials</a> </li>
<li> <a href="emp_contact">Contact</a> </li>
<li> <a href="industries_serviced">Industries Serviced</a> </li>
</ul>
</li>
<li class="about_opt">
<a href="#">ABOUT</a>
<ul class="about_list subMenu">
<li> <a href="company_prof">Company Profile</a> </li>
<li> <a href="mission_statement">Mission Statement</a> </li>
<li> <a href="privacy_policy">Privacy Policy</a> </li>
<li> <a href="about_company_lit">Company Literature</a> </li>
<li> <a href="casl_compliance">CASL Compliance</a> </li>
<li> <a href="accessibility">Accessiblity</a> </li>
</ul>
</li>
<li> <a href="contact">CONTACT</a> </li>
</ul>
</div>
<div class="mainContainer">
<div class="leftDiv">
<h1 class="pageHeading"> Our Business Units</h1>
<ul class="leftList">
<li><a href="search_jobs">Search Jobs</a></li>
<li><a href="seek_bus_units">Our Business Units</a></li>
<li><a href="tips">Tips</a></li>
<li><a href="send_resume">Send Us Your Resume</a></li>
</ul>
</div>
<div class="rightDiv">
<br/><br/>
<h1 class="rightDivTitle">Our Business Units</h1>
<br/><br/>
<p class="rightDivContent">
Our recruitment and staffing consultants have experience placing professionals in the following areas:
<br/>
<br/>
<ul class="rightDivList">
<li>Engineering</li>
<li>Executive and Management</li>
<li>Information Technology</li>
<li>Insurance and Financial</li>
<li>Light Industrial</li>
<li>Technical and Operations</li>
</ul>
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
Very long content here <br />
</p>
</div>
</div>
</body>
</html>