关于页脚的具体位置
来源：5-12 项目作业
粉墨登场
2020-12-31 14:49:01
问题描述：
老师你好，当做完整个页面结构样式和交互之后，发现页脚的位置是不对的，我看了一下应该是hospital-department这个大容器的高度没有被撑开，因为里面的切换页的元素是绝对定位，这个时候我就在想如何解决。发现有两种方法：第一个比较简单直接，直接给hospital-department这个大容器设置固定的高度（高度是切换页内容中高度最大的那个），直接就写死了，那不管切换页的高度是多少，页脚都是固定在最下方的。 第二种方法是随着切换页的高度而适应，在点击选项卡切换时让
hospital-department大容器的高度等于被切换到的页的高度，但是这样我发现不是很美观，因为高度不固定，切换时页面会有高度的加减。 不知道哪一种是最好的解决方法，希望老师指点一下。下面给出具体代码。
相关代码：
这是HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慕课第二章第二阶段作业</title>
<!-- 引入css样式文件 -->
<link rel="stylesheet" href="css样式/css.css">
<!-- 引入jQuery文件 -->
<script src="jquery.js"></script>
<!-- 引入JS脚本文件 -->
<script src="js脚本/js.js"></script>
</head>
<body>
<!-- top区域内容开始 -->
<section class="top">
<div class="top-wrap">
<p>010-114/116114电话预约</p>
<p>
欢迎来到城市预约挂号统一平台
请
<a href="javascript:;">登录</a>
<a href="javascript:;">注册</a>
<a href="javascript:;">帮助中心</a>
</p>
</div>
</section>
<!-- top区域内容结束 -->
<!-- header区域内容开始 -->
<section class="header">
<div class="header-wrap">
<div class="header-logo">
<img src="img/logo.png">
</div>
<div class="header-search">
<div class="header-search-selected">
医院
</div>
<div class="header-search-list">
<a href="javascript:;" class="header-search-select-items">科室</a>
<a href="javascript:;" class="header-search-select-items">疾病</a>
<a href="javascript:;" class="header-search-select-items">医院</a>
</div>
<input type="text" placeholder="请输入搜索内容" class="header-search-input">
<a href="javascript:;" class="header-search-submit"> </a>
</div>
</div>
</section>
<!-- header区域内容结束 -->
<!-- nav导航区域内容开始 -->
<nav class="nav">
<div class="nav-wrap">
<a href="javascript:;" class="nav-items">首页</a>
<a href="javascript:;" class="nav-items">按医院挂号</a>
<a href="javascript:;" class="nav-items">按科室挂号</a>
<a href="javascript:;" class="nav-items">按疾病挂号</a>
<a href="javascript:;" class="nav-items">最新公告</a>
<a href="javascript:;" class="nav-items">社会知名医院</a>
</div>
</nav>
<!-- nav导航区域内容结束 -->
<!-- 医院简介区域内容开始 -->
<section class="hospital-information">
<div class="hospital-information-wrap">
<div class="hospital-information-top">
<div class="hospital-information-topLeft">
<span>北京协和医院</span>
<span>关注医院</span>
</div>
<div class="hospital-information-topRight">
<i>等级:</i>
<span>三级甲等</span>
<i>区域:</i>
<span>东城区</span>
<i>分类:</i>
<span>中国医科院所属医院</span>
</div>
</div>
<div class="hospital-information-bottom clearfix">
<div class="hospital-information-bottomLeft">
<img src="img/hospital-1.jpg">
</div>
<div class="hospital-information-bottomMiddle">
<div class="clearfix">
<span></span>
<p>
[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓胡同41号
</p>
</div>
<div class="clearfix">
<span></span>
<p>
http://www.pumch.cn/
</p>
</div>
<div class="clearfix">
<span></span>
<p>
东院咨询台:010-69155564; 西院咨询台:010-69158010
</p>
</div>
<div class="clearfix">
<span></span>
<p>
东院：106，108，110，111，116，684，685到东单路口北；41，104快，814到东单路口南；1，51，728，802到东单路口西；20，25，37，39到东单路口东；103，104，420，803到新东安市场；地铁1、5号线到东单。西院：68到辟才胡同东口；更多乘车路线详见须知
</p>
</div>
</div>
<div class="hospital-information-bottomRight">
<img src="img/map-1.png">
</div>
</div>
</div>
</section>
<!-- 医院简介区域内容结束 -->
<!-- 医院体系区域内容开始 -->
<section class="hospital-department">
<div class="hospital-department-wrap clearfix">
<!-- 医院体系标题部分 -->
<div class="hospital-department-itmes-box">
<a href="javascript:;" class="hospital-department-items hospital-department-items-focus">预约挂号</a>
<a href="javascript:;" class="hospital-department-items">医院介绍</a>
<a href="javascript:;" class="hospital-department-items">预约须知</a>
<a href="javascript:;" class="hospital-department-items">停诊信息</a>
<a href="javascript:;" class="hospital-department-items">查询取消</a>
</div>
<!-- 医院体系内容部分 -->
<div>
<div class="hospital-department-content clearfix">
<div class="hospital-department-content-left clearfix">
<div class="hospital-department-content-left-box clearfix">
<p class="hospital-department-content-title">
开放预约科室
</p>
<div class="hospital-department-content-title-items clearfix">
<div class="hospital-department-content-title-items-left">
2301
</div>
<div class="hospital-department-content-title-items-right">
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
</div>
</div>
<div class="hospital-department-content-title-items clearfix">
<div class="hospital-department-content-title-items-left">
专科
</div>
<div class="hospital-department-content-title-items-right">
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
</div>
</div>
<div class="hospital-department-content-title-items clearfix">
<div class="hospital-department-content-title-items-left">
内科
</div>
<div class="hospital-department-content-title-items-right">
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
</div>
</div>
<div class="hospital-department-content-title-items clearfix">
<div class="hospital-department-content-title-items-left">
内科
</div>
<div class="hospital-department-content-title-items-right">
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
<a href="javascript:;" class="data-table-jump">特殊门诊科</a>
</div>
</div>
<div class="right">
<!-- 右侧滚动条部分 -->
<div class="hospital-department-content-right">
<p class="hospital-department-content-right-title">
预约规则<span>（更新时间每日8:30更新）</span>
</p>
<div class="hospital-department-content-scroll">
<p class="clearfix">
<span>预约周期：</span>
<span>7天</span>
</p>
<p class="clearfix">
<span>放号时间：</span>
<span>8:30</span>
</p>
<p class="clearfix">
<span>停挂时间：</span>
<span>下午14:00停止次日预约挂号（周五14:00后停挂至下周一）</span>
</p>
<p class="clearfix">
<span>退号时间：</span>
<span>就诊前一工作日14:00前取消</span>
</p>
<p class="clearfix">
<span>特殊规则：</span>
<span>
<br>
①
取号地点不同：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</span>
</p>
</div>
</div>
</div>
</div>
<div class="hospital-department-content-left-box">
<p>
科室排班表
<a href="javascript:;" class="return-department-list">返回科室列表</a>
</p>
<div class="date-table">
<div class="date-table-left clearfix">
<div class="date-table-left-first">
<div class="button-left"> </div>
<div>上午</div>
<div>下午</div>
<div>晚上</div>
</div>
<div class="date-table-left-second">
<div class="date-wrap"></div>
</div>
<div class="date-table-left-third">
<div class="button-right"> </div>
<div></div>
</div>
</div>
<div class="date-table-right">
<div class="hospital-department-content-right">
<p class="hospital-department-content-right-title">
预约规则<span>（更新时间每日8:30更新）</span>
</p>
<div class="hospital-department-content-scroll">
<p class="clearfix">
<span>预约周期：</span>
<span>7天</span>
</p>
<p class="clearfix">
<span>放号时间：</span>
<span>8:30</span>
</p>
<p class="clearfix">
<span>停挂时间：</span>
<span>下午14:00停止次日预约挂号（周五14:00后停挂至下周一）</span>
</p>
<p class="clearfix">
<span>退号时间：</span>
<span>就诊前一工作日14:00前取消</span>
</p>
<p class="clearfix">
<span>特殊规则：</span>
<span>
<br>
①
取号地点不同：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</span>
</p>
</div>
</div>
</div>
</div>
<div class="hospital-department-content-left-box-bottom">
<p>您还没有选择就诊日期</p>
</div>
</div>
</div>
</div>
<div class="hospital-department-content">
<p>
北京协和医院是集医疗、教学、科研于一体的大型三级甲等综合医院，是国家卫生计生委指定的全国疑难重症诊治指导中心，也是最早承担高干保健和外宾医疗任务的医院之一。以学科齐全、技术力量雄厚、特色专科突出、多学科综合优势强大享誉海内外。在2010、2011、2012、2013、2014年复旦大学医院管理研究所公布的“中国最佳医院排行榜”中连续五年名列榜首。
</p>
<p>
医院建成于1921年，由洛克菲勒基金会创办。建院之初，就志在“建成亚洲最好的医学中心”. 90余年来，医院形成了“严谨、求精、勤奋、奉献”的协和精神和兼容并蓄的特色文化风格，创立了“三基”、“三严”的现代医学教育理念，形成了以“教授、病案、图书馆”著称的协和“三宝” ,培养造就了张孝弯、林巧稚等一代医学大师和多位中国现代医学的领军人物，并向全国输送了大批的医学管理人才,创建了当今知名的10余家大型综合及专科医院。2011年在总结90年发展经验的基础上，创新性提出了“待病人如亲人，提高病人满意度;待同事如家人，提高员工幸福感”新办院理念。
</p>
<p>
目前，医院共有2个院区、总建筑面积53万平方米，在职职工4000余名、两院院士5人、临床和医技科室53个、国家级重点学科20个、国家临床重点专科29个、博士点16个、硕士点29个、国家级继续医学教育基地6个、二级学科住院医师培养基地18个、三级学科专科医师培养基地15个。开放住院床位2000余张，单日最高门诊量约1.5万人次、年出院病人约8万余人次。被评为“全国文明单位”、“全国创先争优先进基层党组织”、、全国卫生系统先进集体”、“首都卫生系统文明单位”、 “最受欢迎三甲医院”，荣获全国五一劳动奖章。同时，医院还承担着支援老少边穷地区、国家重要活动和突发事件主力医疗队的重任，在2008年北京奥运工作中荣获“特别贡献奖”。
</p>
<p>
90多年来，协和人以执着的医志、高尚的医德、精湛的医术和严谨的学风书写了辉煌的历史，今天的协和人正为打造“国际知名、国内一流”医院的目标而继续努力。
</p>
</div>
<div class="hospital-department-content">
<h1>北京协和医院预约挂号须知</h1>
<h4>电话预约挂号:010-114(24小时)</h4>
<h4>网络预约挂号：http://www.bjguahao.gov.cn</h4>
<p>根据卫生部8月5号通知和卫生局8月20号工作部署，北京协和医院已完成电话、网络预约挂号的流程建设，现将预约挂号、取号有关事项公布如下，请您认真阅读预约须知</p>
<div>
<h4>一、预约时间范围：</h4>
<p>1. 您可预约7天内（试点）日间的副教授、主治医师和住院医师等号源。节假日不安排预约号（含周六、周日）</p>
<p>2. 每天早上8:30分开始放号；下午14:00停止次日预约挂号</p>
<p>3. 周五14:00停挂至下周一。</p>
</div>
<div>
<h4>预约实名制：</h4>
<p>统一平台电话预约和网上预约挂号均采取实名制注册预约，请您如实提供就诊人员的真实姓名，有效证件号（身份证、军官证、护照）、性别、电话、手机号码、病案号或协和就诊卡条形码上的ID号等有效基本信息
</p>
</div>
<div>
<h4>预约取号：</h4>
<p>1. 预约成功后，请患者于就诊当日携带有效证件、预约识别码及协和医院就诊卡到医院挂号窗口验证预约信息（核实与预约登记实名信息一致的本人有效证件和预约识别码）和取号，如验证不符则医院不能提供相应的诊疗服务。如果没有协和医院就诊卡，请先办好就诊卡后再取号。
</p>
<p>2. 取号时间：上午就诊患者，就诊当日早9：00以前取号，下午就诊患者，就诊当日下午12：00~13：30之间取号。过时未取号者，预约作废。</p>
<p>3. 取号地点：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。
</p>
</div>
<div>
<h4>四、医生停诊：</h4>
<p>如遇特殊情况医生停诊，给您造成的不便敬请谅解。医生临时停诊，工作人员将会用电话方式及时通知您，请配合更改就诊日期或更换其它医生，请您保持电话畅通。</p>
</div>
<div>
<h4>五、取消预约：</h4>
<p>挂出的预约号如办理退号，至少在就诊前一工作日14：00前通过网站或者114用电话凭预约识别码进行取消</p>
</div>
<div>
<h4>六、爽约处理：</h4>
<p>1. 如预约成功后患者未能按时就诊且不办理取消预约号视为爽约</p>
<p>2. 一年内（自然年）无故爽约累计达到3次的爽约用户将自动进入系统爽约名单，此后3个月内将取消其预约挂号资格；一年内（自然年）累计爽约6次，取消6个月的预约挂号资格。
</p>
</div>
<div>
<h4>七、其它注意事项：</h4>
<p>1. 协和东院、西院都可以预约。</p>
<p>2. 国际医疗部门诊、卫干门诊不对外预约。</p>
</div>
<div>
<h4>交通指南：</h4>
<p>东院乘车路线：</p>
<p>106、108、111、116、684、685到东单路口北；41、104快、814到东单路口南；152、728、802到东单路口西；10、20、25、37、39到东单路口东；103、104、420、803到新东安市场；地铁1号线或5号线到东单站；A或B出口向北
</p>
<p>西院乘车路线：</p>
<p>68到辟才胡同东口；22、46、102、105、109、603、604、626、690、808、826到西单商城；1、10、37、52、70、728、802到西单路口东；地铁1号线或4号线到西单站，F1或G出口向北。
</p>
</div>
<h5>北京协和医院</h5>
</div>
<div class="hospital-department-content">
<h1>停诊信息</h1>
<table cellspacing="0">
<tr>
<td>日期</td>
<td>星期</td>
<td>时段</td>
<td>科室</td>
<td>特长</td>
<td>职称</td>
<td>挂号费</td>
<td>可挂号数</td>
<td>剩余号数</td>
<td>替换方式</td>
</tr>
<tr>
<td>2017-01-09</td>
<td>1</td>
<td>上午</td>
<td>呼吸内科门诊</td>
<td></td>
<td>主治医师</td>
<td>5.00</td>
<td>0</td>
<td>0</td>
<td>不可替换</td>
</tr>
</table>
</div>
<div class="hospital-department-content">
<div>
<span>
预约识别码：
<input type="text">
<a href="javascript:;">查询订单</a>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- 医院体系区域内容结束 -->
<!-- 页脚区域内容开始 -->
<footer class="footer">
Copyright © 2017慕课网版权所有
</footer>
<!-- 页脚区域内容结束 -->
</body>
</html>
相关代码：
这是CSS样式
/* 先清除一下默认的样式 */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* top区域样式开始 */
.top {
background: #f5f5f5;
height: 30px;
}
.top-wrap {
width: 1000px;
margin: 0 auto;
height: 30px;
}
.top-wrap>p {
color: #868686;
line-height: 30px;
font-size: 13px;
}
.top-wrap>p:nth-child(1) {
padding-left: 20px;
background: url(../img/icon-call.png) no-repeat center left;
float: left;
}
.top-wrap>p:nth-child(2) {
float: right;
}
.top-wrap>p>a {
color: #2da5e1;
}
/* top区域样式结束 */
/* header区域样式开始 */
.header {
height: 92px;
}
.header-wrap {
width: 1000px;
margin: 0 auto;
height: 92px;
position: relative;
}
.header-logo {
width: 402px;
height: 74px;
padding-top: 9px;
cursor: pointer;
}
.header-logo>img {
width: 100%;
height: 100%;
}
.header-search {
width: 326px;
height: 38px;
position: absolute;
top: 27px;
right: 0;
background: url(../img/ui-search.jpg) no-repeat center;
font-size: 14px;
color: #fff;
}
.header-search-selected {
position: absolute;
left: 0;
line-height: 38px;
width: 70px;
height: 38px;
text-indent: 14px;
cursor: pointer;
}
.header-search-list {
width: 67px;
position: absolute;
background: #fff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
top: 38px;
left: 2px;
display: none;
}
.header-search-select-items {
color: #A5a2a2;
display: block;
text-align: center;
padding: 3px 0;
}
.header-search-select-items:hover {
background: #ebeef5;
}
.header-search-input {
width: 208px;
height: 26px;
border: none;
outline: none;
position: absolute;
left: 73px;
top: 7px;
font-size: 13px;
color: #A5A2A2;
line-height: 26px;
}
.header-search-submit {
display: block;
width: 40px;
height: 36px;
position: absolute;
right: 0;
}
/* header区域样式结束 */
/* nav导航区域样式开始 */
.nav {
background: #60bff2;
height: 36px;
}
.nav-wrap {
width: 1000px;
height: 100%;
margin: 0 auto;
padding-left: 30px;
}
.nav-items {
display: inline-block;
line-height: 36px;
font-size: 16px;
height: 36px;
color: #fff;
text-align: center;
width: 100px;
margin-right: 25px;
}
.nav-items:last-child {
float: right;
}
.nav-items:hover {
background: #87CEEB;
}
/* nav导航区域样式结束 */
/* 医院简介区域样式开始 */
.hospital-information {
margin-top: 30px;
}
.hospital-information-wrap {
background: #F7F7F7;
width: 1000px;
margin: 0 auto;
padding: 0 30px;
height: 350px;
}
.hospital-information-top {
height: 70px;
line-height: 70px;
border-bottom: 2px solid rgb(220, 221, 221);
}
.hospital-information-topLeft {
float: left;
}
.hospital-information-topLeft>span:nth-child(1) {
font: 500 20px '微软雅黑';
}
.hospital-information-topLeft>span:nth-child(2) {
color: rgb(242, 150, 0);
font-size: 14px;
}
.hospital-information-topRight {
float: right;
font-size: 14px;
}
.hospital-information-topRight>i {
font-style: normal;
color: #0000EE;
}
.hospital-information-topRight>span {
font-weight: 600;
margin-right: 10px;
}
.hospital-information-bottom {
margin-top: 15px;
}
.hospital-information-bottom>div {
float: left;
}
.hospital-information-bottomMiddle>div {
padding-left: 16px;
color: #868686;
margin-top: 15px;
font-size: 13px;
margin-left: 15px;
position: relative;
}
.hospital-information-bottomMiddle>div:nth-child(4) {
height: 100px;
}
.hospital-information-bottomMiddle>div:nth-child(4)>span {
position: absolute;
top: 0;
left: 16px;
}
.hospital-information-bottomMiddle>div:nth-child(4)>p {
position: absolute;
top: 0;
left: 36px;
width: 452px;
}
.hospital-information-bottomMiddle span {
width: 16px;
height: 16px;
background: url(../img/icon-web.png) no-repeat;
float: left;
margin-top: 3px;
}
.hospital-information-bottomMiddle>div:nth-child(2)>span {
background-position-y: -21px;
}
.hospital-information-bottomMiddle>div:nth-child(3)>span {
background-position-y: -43px;
}
.hospital-information-bottomMiddle>div:nth-child(4)>span {
background-position-y: -63px;
}
.hospital-information-bottomMiddle p {
margin-left: 15px;
line-height: 24px;
float: left;
}
.hospital-information-bottom .hospital-information-bottomRight {
width: 250px;
height: 165px;
float: right;
margin: 0;
}
.hospital-information-bottomRight>img {
width: 100%;
height: 100%;
}
/* 医院简介区域样式结束 */
/* 医院体系区域样式开始 */
.hospital-department {
margin-top: 40px;
height: 1500px;
transition: 0.3s;
}
.hospital-department-wrap {
width: 1060px;
margin: 0 auto;
position: relative;
}
/* 医院体系标题部分 */
.hospital-department-itmes-box {
height: 50px;
width: 100%;
background: #fff;
border-bottom: 2px solid #60bff2;
}
.hospital-department-items {
float: left;
height: 30px;
line-height: 30px;
text-align: center;
color: #60bff2;
padding: 10px 20px;
transition: 0.5s;
}
.hospital-department-items-focus {
color: #fff;
background: #60bff2;
}
/* 医院体系内容部分 */
.hospital-department-content {
width: 100%;
margin-top: 20px;
position: absolute;
display: none;
}
.hospital-department-content:nth-of-type(1) {
display: block;
}
.hospital-department-content:nth-of-type(2)>p {
margin-top: 20px;
text-indent: 30px;
line-height: 30px;
font-size: 14px;
}
.hospital-department-content-left {
width: 100%;
}
.hospital-department-content-left-box {
width: 100%;
display: none;
}
.right {
display: inline-block;
margin-left: 20px;
width: 28%;
}
.hospital-department-content-left-box:nth-of-type(1) {
display: block;
}
.hospital-department-content-left-box:nth-of-type(2)>p {
font-size: 17px;
height: 25px;
}
.hospital-department-content-left-box:nth-of-type(2)>p>a {
display: inline-block;
height: 25px;
color: #60bff2;
font-size: 15px;
margin-left: 10px;
}
.hospital-department-content-title {
background: #F7F7F7;
height: 60px;
line-height: 60px;
width: 70%;
text-indent: 25px;
font-size: 18px;
float: left;
}
.hospital-department-content-title-items {
float: left;
width: 70%;
}
.hospital-department-content-title-items-left {
width: 138px;
float: left;
height: 110px;
background: rgb(242, 251, 255);
color: #868686;
font-size: 14px;
text-align: center;
line-height: 60px;
border-bottom: 2px solid #F7F7F7;
border-left: 2px solid #F7F7F7;
font-weight: 600;
}
.hospital-department-content-title-items-right {
width: 600px;
float: left;
height: 100px;
border-bottom: 2px solid #F7F7F7;
border-right: 2px solid #F7F7F7;
padding: 5px 0;
}
.hospital-department-content-title-items-right>a {
display: inline-block;
width: 85px;
height: 20px;
color: #000;
margin: 5px 20px;
}
.hospital-department-content-right {
border-left: 1px solid rgb(220,221,221);
border-bottom: 1px solid rgb(220,221,221);
}
.hospital-department-content-right-title {
height: 60px;
background: #F7F7F7;
font-size: 18px;
line-height: 60px;
text-indent: 10px;
}
.hospital-department-content-right-title>span {
color: #60bff2;
font-size: 14px;
}
.hospital-department-content-scroll {
overflow-y: scroll;
height: 270px;
}
.hospital-department-content-scroll>p {
margin-top: 15px;
font-size: 14px;
text-indent: 10px;
}
.hospital-department-content-scroll>p>span:nth-child(1) {
width: 80px;
float: left;
}
.hospital-department-content-scroll>p>span:nth-child(2) {
width: 184px;
float: left;
text-indent: 0;
color: #868686;
font-size: 13px;
}
.hospital-department-content:nth-of-type(3)>h1 {
text-align: center;
margin: 50px 0;
}
.hospital-department-content:nth-of-type(3)>h4 {
margin-bottom: 15px;
}
.hospital-department-content:nth-of-type(3)>h4:nth-of-type(1) {
margin-bottom: 35px;
}
.hospital-department-content:nth-of-type(3)>div {
margin-top: 30px;
}
.hospital-department-content:nth-of-type(3) p {
font-size: 14px;
line-height: 25px;
letter-spacing: 1px;
}
.hospital-department-content:nth-of-type(3)>h5 {
text-align: center;
margin-top: 60px;
}
.hospital-department-content:nth-of-type(4)>h1 {
text-align: center;
margin: 30px 0;
}
table {
width: 100%;
border: 2px solid #F7F7F7;
text-align: center;
border-collapse: collapse;
}
tr {
width: 80px;
height: 40px;
border: 2px solid #F7F7F7;
}
tr>td:nth-of-type(1) {
width: 80px;
}
tr>td:nth-of-type(4) {
width: 100px;
}
td {
height: 40px;
border: 2px solid #F7F7F7;
font-size: 14px;
color: #868686;
width: 35px;
}
.hospital-department-content:nth-of-type(5)>div {
margin-top: 50px;
height: 200px;
border-top: 2px solid rgb(220,221,221);
border-bottom: 2px solid rgb(220,221,221);
position: relative;
}
.hospital-department-content:nth-of-type(5) span {
font-size: 18px;
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 427px;
}
.hospital-department-content:nth-of-type(5) input {
height: 30px;
width: 190px;
outline: none;
border: 1px solid rgb(220,221,221);
}
.hospital-department-content:nth-of-type(5) a {
height: 32px;
width: 110px;
display: inline-block;
color: #fff;
background: #60bff2;
position: absolute;
top: 50%;
margin-top: -13px;
margin-left: 10px;
text-align: center;
line-height: 32px;
}
.date-table {
width: 100%;
height: 390px;
border: 2px solid rgb(220,221,221);
margin-top: 20px;
}
.date-table-left {
width: 70%;
float: left;
}
.date-table-right {
width: 30%;
float: right;
height: 390px;
}
.date-table-right .hospital-department-content-scroll {
height: 330px;
}
.date-table-left-first {
height: 100%;
width: 5%;
float: left;
}
.date-table-left-first>div {
height: 114px;
text-align: center;
line-height: 114px;
background: rgb(241,248,254);
border-right: 1px solid rgb(220,221,221);
font-size: 14px;
}
.date-table-left-first>div:nth-of-type(1) {
background: url(../img/icon-scheduling-left.jpg) no-repeat center;
height: 48px;
cursor: pointer;
}
.date-table-left-second {
width: 673px;
float: left;
height: 390px;
overflow: hidden;
position: relative;
}
.date-table-left-third {
float: right;
width: 4%;
height: 100%;
border-left: 1px solid rgb(220,221,221);
border-right: 1px solid rgb(220,221,221);
}
.date-table-left-third>div:nth-of-type(1) {
background: url(../img/icon-scheduling-right.jpg) no-repeat;
height: 48px;
cursor: pointer;
}
.date-table-left-third>div:nth-of-type(2) {
background: rgb(241,248,254);
height: 342px;
}
.date-wrap {
width: 5000px;
transition: 0.8s;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.schedule-box-item {
text-align: center;
width: 96px;
height: auto;
float: left;
font-size: 14px;
}
.date {
color: #868686;
background: #f8fafc;
line-height: 18px;
height: 36px;
padding: 4px 0;
width: 94px;
border: 1px solid #dcdddd;
}
.status {
background: #fff;
width: 94px;
height: 113px;
line-height: 113px;
border: 1px solid #dcdddd;
cursor: pointer;
}
.status-full {
background: #e0eefd;
cursor: pointer;
color: #4ab4ed;
}
.hospital-department-content-left-box-bottom {
width: 100%;
height: 70px;
border: 2px solid rgb(220,221,221);
border-top: none;
overflow: hidden;
}
.hospital-department-content-left-box-bottom>p {
padding-left: 10px;
text-align: center;
background: url(../img/icon-info.jpg) no-repeat;
width: 200px;
margin: 26px auto 0 auto;
color: #868686;
}
/* 医院体系区域样式结束 */
/* 页脚区域样式开始 */
.footer {
height: 70px;
background: #eceef2;
color: #acacac;
line-height: 70px;
text-align: center;
}
/* 页脚区域样式结束 */
这是js代码
// 1. 为header-search添加组件化方法
$.fn.UiSearch = function() {
var ui = $(this);
var search_selected = $('.header-search-selected', ui),
select_list = $('.header-search-list', ui),
select_list_items = $('.header-search-select-items', ui);
search_selected.on('click', function() {
select_list.show();
return false;
});
select_list_items.on('click', function() {
select_list.hide();
search_selected.html($(this).html());
});
$('body').on('click', function() {
select_list.hide();
});
};
// 2. 为 hospital-department添加组件化方法，点击具体选项卡时，相对应的内容显示出来
$.fn.UiHospitalDepartment = function(items, contents) {
var ui = $(this);
items.on('click', function() {
contents.fadeOut().eq($(this).index()).fadeIn();
items.removeClass('hospital-department-items-focus').eq($(this).index()).addClass('hospital-department-items-focus');
// 当点击切换页时，最外面大容器的高度等于切换到的页的高度再加 150
// ui.css('height', contents.eq($(this).index()).height() + 150);
});
}
// 3. 为 hospital-department-content-left对象添加组件化方法，点击具体的科室列表名称时，跳转到科室排班表。 并且在科室排班表点击 “返回科室列表”时，再跳转回具体的科室列表
$.fn.UiJump = function(item, box, index) {
index = index || 0;
item.on('click', function() {
box.hide().eq(index).show();
})
}
// 4. 为排班表区域实现点击排班表坐上和右上的箭头按钮时，排班表滑动轮播
$.fn.UiSlider = function(btnR, btnL) {
// 获取整个排班表外的大容器，因为轮播是控制容器的left值
var wrap = $('.date-wrap');
// 设置计数，为点击的次数
var currentPage = 0;
// 给大容器添加自定义事件move_next， 调用时，触发计数++， 并判断如果超出最大计数就初始化， 并且执行添加的自定义事件 move_to 事件。将计数currentPage当作参数传入
wrap.on('move_next', function() {
currentPage++;
if(currentPage >= 7) {
currentPage = 0;
};
wrap.triggerHandler('move_to', currentPage)
})
// 给大容器添加自定义事件move_prev， 调用时，触发计数--， 并判断如果小于最小计数就初始化， 并且执行添加的自定义事件 move_to 事件。将计数currentPage当作参数传入
.on('move_prev', function() {
currentPage--;
if(currentPage < 0) {
currentPage = 6;
}
wrap.triggerHandler('move_to', currentPage)
})
// 这里接收传入的 currentPage 当作形参index的值，并计算应该滚动多少距离
.on('move_to', function(event, index) {
wrap.css('left', index * 672 * -1);
})
// 右边按钮绑定点击事件，点击时调用自定义函数move_next
btnR.on('click', function() {
wrap.triggerHandler('move_next')
});
// 左边按钮，点击时调用自定义函数move_prev
btnL.on('click', function() {
wrap.triggerHandler('move_prev')
});
}
// jQuery代码
// DOM结构加载完毕后再执行的JS脚本
$(document).ready(function() {
// 1. 为 header-search对象添加 UiSearch方法
$('.header-search').UiSearch();
// 2. 为 hospital-department对象添加 UiHospitalDepartment方法 把选项卡和对应的内容的DOM节点对象当作参数传入
$('.hospital-department').UiHospitalDepartment($('.hospital-department-items'), $('.hospital-department-content'));
// 3. 为 hospital-department-content-left对象添加 UiJump 跳转事件，把点击项和相应显示的项和相应显示项的索引当作参数传入
$('.hospital-department-content-left').UiJump($('.data-table-jump'), $('.hospital-department-content-left-box'), 1);
// 3. 为 hospital-department-content-left对象添加 UiJump 跳转回来事件，把返回科室列表的点击项和科室列表当作参数传入
$('.hospital-department-content-left').UiJump($('.return-department-list'), $('.hospital-department-content-left-box'));
// 4. 动态生成科室排班表
var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
$('.date-wrap').empty();
var pageCount = 7;
var days = pageCount * 7;
var date = new Date();
var time = date.getTime();
for(var k = 0; k < days; k++) {
var _t = time + k * 86400 * 1000;
var _d = new Date(_t);
var html = [];
var w = week[_d.getDay()];
var y = _d.getFullYear();
var m = _d.getMonth() + 1;
m = m < 10 ? '0' + m : m;
var d = _d.getDate();
d = d < 10 ? '0' + d : d;
html.push('<div class="schedule-box-item"> <div class="date">' + w + '<br>' + y + '-' + m + '-' + d + '</div>');
html.push('<div class="status"></div>');
html.push('<div class="status status-full">约满</div>');
html.push('<div class="status"></div></div>');
$('.date-wrap').append(html.join(''));
};
// 4. 排班表轮播图滑动
$('.date-table').UiSlider($('.button-right'), $('.button-left'));
});
// 原生JS代码
window.onload = function() {
// 动态创建table表格
var table = document.getElementsByTagName('table');
for(var i = 0; i < 19; i++) {
var tr = document.createElement('tr');
table[0].appendChild(tr);
for(var j = 0; j < 10; j++) {
var td = document.createElement('td');
td.innerHTML = '不可替换';
tr.appendChild(td);
}
}
var td = document.getElementsByTagName('td');
// 动态填充不同td内的文本内容
for(var x = 0; x < td.length; x++) {
if(x % 10 === 0 && x !== 0) {
td[x].innerHTML = '2017-1-13';
}else if(x % 10 === 1 && x !== 1) {
td[x].innerHTML = '3';
}else if(x % 10 === 2 && x !== 2) {
td[x].innerHTML = '上午';
}else if(x % 10 === 3 && x !== 3) {
td[x].innerHTML = '变态反应科门诊';
}else if(x % 10 === 4 && x !== 4) {
td[x].innerHTML = '';
}else if(x % 10 === 5 && x !== 5) {
td[x].innerHTML = '专家';
}else if(x % 10 === 6 && x !== 6) {
td[x].innerHTML = '300.00';
}else if(x % 10 === 7 && x !== 7) {
td[x].innerHTML = '0';
}else if(x % 10 === 8 && x !== 8) {
td[x].innerHTML = '0';
}else if(x % 10 === 9 && x !== 9) {
td[x].innerHTML = '不可替换';
};
};
}
写回答
1回答
-
同学你好，问题解答如下：
1、第一种设置固定高度是不可取的，因为父容器高度固定，子元素高度不够，下面就会有很大的空白。如下：
所以实际开发中，父容器不需要设置高度，只需要让内容撑开即可。
2、同学的代码中，去掉高度之后，由于子元素定位脱离文档流，所以尾部会跑上去。建议把定位去掉，这里并不需要定位。内容增减，页面高度肯定会增减的，这个是正常的，没有关系。建议把如下高度和定位去掉即可：
祝学习愉快~
0
相似问题