溢出方法在html页面中不起作用。
溢出方法在html页面中不起作用。
提问于 2018-07-24 06:04:26
我正在为学校的一个作业工作，这是设计一个与HTML的应用程序。当你向下滚动时，我在底部的应用程序内容上遇到了问题。我尝试了溢出方法的各种选项，但似乎都不起作用。我包含了整个css和html。感谢所有花时间帮助我的人！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="CSS/reset.css">
<link rel="stylesheet" href="CSS/style.css">
<link href=https://fonts.googleapis.com/css?family='Roboto' rel='stylesheet'>
</head>
<body>
<div id="table-wrapper">
<div id="table-scroll">
<section class="container">
<nav>
<img src="images/status bar.png" width="360" height="24" alt=""/>
<div class="app-bar">
<table width="100%" border="0">
<tbody>
<tr>
<td class="ham-menu"><img src="images/menu.png" width="24" height="24" alt=""/></td>
<td class="title">Washington at State Station</td>
<td class="search-icon"><img src="images/search.png" width="24" height="24" alt=""/></td>
<td class="icon"><img src="images/menu-item.png" width="5" height="24" alt=""/></td>
</tr>
</tbody>
</table>
</div>
<div class="route-bar"><table width="100%" border="0">
<tbody>
<tr>
<td class="lines"><h2>Line</h2></td>
<td class="dest"><h2>Destination</h2></td>
<td class="times"><h2>Arrival</h2></td>
</tr>
</tbody>
</table>
</div>
</nav>
<section class="bus-list">
<div class="info">
<table width="100%" border="0">
<tbody>
<tr>
<td class="lines"><h1>124</h1></td>
<td class="dest"><h1>Eastbound</h1>
<h3>Navy Pier</h3></td>
<td class="times"><h1>5 Min</h1>
<h3>Freq. 10 min</h3>
</td>
</tr>
</tbody>
</table>
</div>
<div class="info">
<table width="100%" border="0">
<tbody>
<tr>
<td><h1>124</h1></td>
<td class="dest"><h1>Southbound</h1> <h3>Navy Pier</h3></td>
<td class="times"><h1>10 Min</h1>
<h3>Freq. 10 min</h3>
</td>
</tr>
</tbody>
</table>
</div>
<div class="info">
<table width="100%" border="0">
<tbody>
<tr>
<td><h1>J14</h1></td>
<td class="dest"><h1>Southbound</h1>
<h3>103rd/Stony Island</h3></td>
<td class="times"><h1>15 Min</h1>
<h3>Freq. 15 min</h3></td>
</tr>
</tbody>
</table>
</div>
<div class="info">
<table width="100%" border="0">
<tbody>
<tr>
<td class="lines"><h1>151</h1></td>
<td class="dest"><h1>Northbound</h1>
<h3>Devon/Clark</h3></td>
<td class="times"><h1>16 Min</h1>
<h3>Freq. 16 min</h3></td>
</tr>
</tbody>
</table>
</div>
<div class="info">
<table width="100%" border="0">
<tbody>
<tr>
<td class="lines"><h1>60</h1></td>
<td class="dest"><h1>Eastbound</h1>
<h3>Randolph/Harbor Dr</h3></td>
<td class="times"><h1>18 Min</h1>
<h3>Freq. 20 min</h3></td>
</tr>
</tbody>
</table>
</div>
<div class="info">
<table width="100%" border="0">
<tbody>
<tr>
<td class="lines"><h1>6X</h1></td>
<td class="dest"><h1>Reroute</h1>
<h3>Jackson Park Express</h3>
</td>
<td class="times"><h1>30 Min</h1>
<h3>Freq. N/A</h3></td>
</tr>
</tbody>
</table>
</div>
<div class="info">
<table width="100%" border="0">
<tbody>
<tr>
<td class="lines"><h1>4</h1></td>
<td class="dest"><h1>Out of Service</h1>
<h3>Cottage Grove</h3>
<h3>Resumes 12:10 am</h3></td>
<td class="alert">
</td>
</tr>
</tbody>
</table>
</div>
<div class="info">
<table width="100%" border="0">
<tbody>
<tr>
<td class="lines"><h1>20</h1></td>
<td class="dest"><h1>Out of Service</h1>
<h3>Madison</h3>
<h3>Resumes 12:10 am</h3></td>
</td>
<td class="alert">
</td>
</tr>
</tbody>
</table>
</div>
<div class="info">
<table width="100%" border="0">
<tbody>
<tr>
<td class="lines"><h1>157</h1></td>
<td class="dest"><h1>Out of Service</h1>
<h3>Streeterville/Taylor</h3>
<h3>Resumes 6:00 am</h3></td>
<td class="alert">
</td>
</tr>
</tbody>
</table>
</div>
</section>
<footer class="footer"></footer>
</section>
</div>
</div>
</body>
</html>
CSS
*, *:before, *:after {
box-sizing: border-box;
}
body {
background-color: #6E6C6C;
font-family: 'Roboto';
font-size: 16px;
color: #ffffff;
margin-top: 75px;
}
#table-wrapper {
position: relative;
}
#table-scroll {
height: 647px;
overflow: auto;
}
h1 {
font-size: 18px;
font-weight:600;
line-height: 1.3em;
color:#02356A;
}
h3 {
font-size: 14px;
font-weight: 400;
line-height: 1.3em;
color:#02356A;
}
.container {
margin: 0 auto;
width: 360px;
height: 667px;
}
nav {
margin: 0 auto;
position: fixed;
width: 360px;
height: 111px;
background-color: #164F9C;
}
.bus-list {
padding-top: 158px;
width: 100%;
padding-bottom: 50px;
}
.info {
text-align: left;
padding: 16px;
width: 100%;
background-color: #e5edf2;
border-bottom: thin #000000 solid;
}
.info:hover {
background-color: #81aef1;
}
.content {
width: 90%;
display:inline-block;
}
.icon {
width: 4px;
padding-left: 24px;
}
.title {
font-size: 20px;
color: #ffffff;
width: 180px;
padding-left: 32px;
vertical-align: middle;
line-height: 1.3em;
}
.ham-menu {
width: 24px;
}
.search-icon {
padding-left: 24px;
width: 24px;
}
.app-bar {
padding: 16px;
}
.route-bar {
background-color:#02356A;
height: 48px;
width: 360px;
text-align: left;
padding: 16px;
}
.lines {
text-align: left;
width: 100px;
}
.dest {
width: 37%;
}
.times {
width: 27%;
text-align: right;
}
.bottom-bar {
background-color: #000000;
margin-top: 425px;
}
.alert {
background-image: url(file:///C:/Users/Steve/bloc/frontend/images/alerts.png);
background-repeat: no-repeat;
background-size: 42px 38px;
background-position: right;
width: 27%;
}
.footer {
position: fixed;
background-color: #000000;
width: 360px;
bottom: 37px;
height: 48px;
background-image:url(file:///C:/Users/Steve/bloc/frontend/images/bottom-bar.png);
background-size: cover;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-24 06:25:14
在页脚的CSS中有一个bottom: 37px;。将其设置为0px，您将不会再看到它下面的元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51487786
复制相关文章
相似问题