无论分辨率如何，div如何使div扩展到屏幕底部？

时间：2017-05-18 14:25:32

标签： html css height overflow

对于我文档中的特定页面（页面上的文本内容未扩展到屏幕底部），div实际上是切断而不是扩展到显示屏的底部。

当我缩小时，div不会随着页面的主体而增长。我试图将其设置为100％无济于事。

你知道我在这里失踪了吗？尝试使用overflow-y属性（将其应用于＆＃34; mainContainer＆＃34;其中包含浮动的子项）也没有任何运气。

＆＃13;
＆＃13; 
* { 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%; }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

由于

2 个答案:

答案 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>

相关问题
最新问题