Html 当我在url页边距中使用div的id时，top在容器上不起作用
我有一个导航栏，当你有一个更小的设备时，它可以调整大小，它工作得很好，响应速度也很快，但是当我链接到services.html#模板时，容器顶部的边距根本不起作用，底部有空白，下面是html和css：Html 当我在url页边距中使用div的id时，top在容器上不起作用,html,css,Html,Css,我有一个导航栏，当你有一个更小的设备时，它可以调整大小，它工作得很好，响应速度也很快，但是当我链接到services.html#模板时，容器顶部的边距根本不起作用，底部有空白，下面是html和css： <!DOCTYPE html> <html> <head> <title>Welcome to FinalProject</title> <!-- Link to the master style -->
<!DOCTYPE html>
<html>
<head>
<title>Welcome to FinalProject</title>
<!-- Link to the master style -->
<link href="styles/master.css" type="text/css" rel="stylesheet">
<link href="styles/table.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="js/menu.js"></script>
</head>
<body>
<nav>
<div id="leftlogo">
<div id="toggler">
☰
</div>
<a href="index.html">
<span id="logo">
</span>
</a>
</div>
<ul id="menu">
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="members/index.html">Members</a></li>
</ul>
</nav>
<div id="container">
<main>
<div class="title">
Services
</div>
<table>
<tr>
<th></th>
<th class="type">Personal</th>
<th class="type">Business</th>
</tr>
<tr>
<th class="left">Bandwidth</th>
<td>15GB</td>
<td>1TB</td>
</tr>
<tr>
<th class="left">Domain Name</th>
<td>Yes, charged</td>
<td>Yes, free (if not premium)</td>
</tr>
<tr>
<th class="left">Hosting</th>
<td>Yes, charged</td>
<td>Yes, charged</td>
</tr>
<tr>
<th class="left">Customizable</th>
<td>Yes, charged</td>
<td>Yes, free</td>
</tr>
<tr>
<th class="left">Delivery</th>
<td>Faster</td>
<td>Fast</td>
</tr>
<tr>
<th class="left">suitable for</th>
<td>Artists, bloggers, vloggers, etc...</td>
<td>Companies, startups, organizations, etc...</td>
</tr>
<tr>
<th class="left">Pricing</th>
<td>$75/month +</td>
<td>$400/month +</td>
</tr>
<tr>
<th></th>
<td class="bigger" id="personal"><a href="pricing.html#personal" class="price-btn">Buy Personal</a></td>
<td class="bigger" id="business"><a href="pricing.html#business" class="price-btn">Buy Business</a></td>
</tr>
</table>
<div class="title">
Templates
</div>
<div class="section" id="templates">
<img src="images/customize.png" class="leftimage">
<div class="smtitle righttext">Templates</div>
<div class="righttext">
<div class="template"><img src="images/globe.png">Template #1</div>
<div class="template"><img src="images/user.png">Template #2</div>
<div class="template"><img src="images/brain.png">Template #3</div>
<div class="template"><img src="images/customize.png">Template #4</div>
<div class="template"><img src="images/framework.png">Template #5</div>
<div class="template"><img src="images/speed.png">Template #6</div>
<div class="righttext"><a href="templates.html">More...</a></div>
</div>
</div>
</main>
</div>
<footer>
<div id="leftfooter">
<script type="text/javascript">
var year = new Date();
year = year.getFullYear();
document.getElementById('leftfooter').innerHTML = year+' © Copyrighted Peter Bou Saada';
</script>
</div>
<div id="rightfooter">
Inquiries? Send me an <a href = "mailto:peterbousaada1998@gmail.com">Email</a>
</div>
</footer>
</body>
</html>
这就是它的样子：
应该是这样的：
请注意，如果链接中没有#模板，它会正常工作请给出演示？请您将代码缩减为清晰的问题？是的，没有问题，我做得很好没有地方是JSFIDLE
/* precautions to prevent any default margins or paddings set by the users browser*/
body,html{
margin:0;
padding:0;
width:100%;
height:100%;
}
body{
overflow:hidden;
}
*{
box-sizing: border-box;
overflow:none;
font-family:Helvetica,Arial,Sans-serif;
}
*::selection {
background: #FF6500;
}
*::-moz-selection {
background: #FF6500;
}
nav{
position:fixed;
width:100%;
top:0;
height:70px;
background-color:#222222;
border-bottom:1px solid #FF6500;
-webkit-box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
-moz-box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
}
nav ul{
width:50%;
float:right;
text-align:left;
padding:0;
margin:0;
}
nav ul li{
display:inline;
list-style-type:none;
padding-right:1em;
text-align:center;
}
nav ul li>a{
color:#FF6500;
text-decoration: none;
font-size:1.3em;
font-family:Helvetica,Arial,Sans-serif;
line-height:65px;
text-shadow:0px 0px 5px rgba(220,220,220,0.5);
transition:all 0.3s ease-out;
border-bottom:0px;
}
nav ul:hover li a{
opacity: 0.5;
}
nav ul li>a:hover{
color:#f7f7f7;
border-bottom:4px solid #FF6500;
opacity:1;
}
#toggler{
float:left;
display:none;
}
#leftlogo{
width:50%;
height:70px;
float:left;
margin:0;
padding:0;
}
#logo{
float:right;
height:70px;
width:100px;
margin-right:50px;
background-image:url('../images/finallogo.png');
background-size: 100%;
background-repeat: no-repeat;
}
#container{
margin:0;
padding:0;
height:calc(100% - 100px);
width:100%;
background-color:#333333;
padding:30px;
margin-top:70px;
margin-bottom:30px;
overflow-y:auto;
}
main{
width:80%;
margin:auto;
color:#d7d7d7;
font-size:1.2em;
letter-spacing: 0.5px;
font-family:Helvetica,Arial,Sans-serif;
}
footer{
margin:0;
padding:0;
position:fixed;
bottom:0;
width:100%;
height:30px;
background-color:#292929;
border-top:1px solid #FF6500;
line-height:30px;
color:#f7f7f7;
}
#leftfooter{
float:left;
width:50%;
padding-left:10%;
}
#rightfooter{
float:right;
width:50%;
text-align:right;
padding-right:10%;
}
#rightfooter>a{
color:#FF6500;
text-decoration: none;
}
.title{
text-align:center;
width:100%;
font-size:1.7em;
font-weight:bold;
margin-bottom:30px;
text-shadow:3px 3px 5px #222222;
}
.smtitle{
width:100%;
font-size:1.7em;
font-weight:bold;
text-shadow:3px 3px 5px #222222;
}
.section{
width:100%;
margin:0;
padding:0;
display:inline-block;
margin-bottom:30px;
transition:all ease-in 0.2s;
}
.section:hover{
border-bottom:5px solid #FF6500;
border-top:5px solid #FF6500;
padding-top:10%;
padding-bottom:10%;
}
.righttext{
padding:0 15px;
float:left;
text-align:left;
width:70%;
text-shadow:3px 3px 5px #222222;
}
.rightimage{
float:right;
width:30%;
}
.leftimage{
float:left;
width:30%;
}
.lefttext{
text-shadow:3px 3px 5px #222222;
padding:0 15px;
float:left;
text-align:left;
width:70%;
}
.section a{
color:#788893;
text-decoration:none;
}
.section a:hover{
color:#f7f7f7;
}
.normal{
width:35%;
margin:auto;
}
dt{
font-weight:bold;
font-size:1.1em;
text-shadow:2px 2px 4px #222222;
}
/* contact form */
#contact{
width:60%;
margin:auto;
}
#contact label{
width:100%;
display:inline-block;
}
#contact input, #contact textarea{
width:100%;
padding:15px 0;
font-size:1.5em;
background-color:#333333;
border:none;
color:#f7f7f7;
border-bottom:5px solid #7a7a7a;
transition:all ease-in 0.3s;
outline:none;
resize:none;
}
#contact input:focus, #contact textarea:focus{
border-bottom:5px solid #f7f7f7;
}
.form-group{
width:100%;
margin-bottom:15px;
}
.button{
width:20%;
margin-right:40%;
margin-left: 40%;
padding:10px;
border-radius:8px;
background-color:#333333;
border:1px solid #f7f7f7;
color:#f7f7f7;
font-weight:bold;
outline:none;
cursor:pointer;
transition: all ease-in 0.2s;
}
.button:hover{
border:none;
border-bottom:5px solid #f7f7f7;
border-radius:0;
width:40%;
margin-left:30%;
margin-right:30%;
background-color:#ff6500;
}
.button:active{
border-bottom:1px solid #f7f7f7;
margin-top : +4px;
}
#count{
text-shadow:5px 5px 8px #222222;
margin-bottom:10px;
}
.button[disabled]{
display:none;
}
.template{
width:25%;
padding:10px;
height:200px;
display:inline-block;
background:#292929;
margin:10px;
text-align:center;
}
.template img{
width:100%;
height:90%;
margin:0;
}
/* custom scrollbar for webkit browsers only */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 20px rgba(255,101,0,1);
}
/* Mobile and tablets */
@media only screen and (max-width:1024px){
nav{
height:50px;
}
nav ul{
margin-top:50px;
height:calc(100% - 50px);
width:100%;
position:fixed;
display:none;
background-color:rgba(0,0,0,0.7);
}
nav ul:hover li a{
opacity:0.7;
}
nav ul li:hover{
color:#f7f7f7;
border-bottom:4px solid #FF6500;
opacity:1;
}
nav ul li:hover a{
color:#f7f7f7;
border-bottom:none;
opacity:1;
}
nav ul li{
width:100%;
height:50px;
line-height:50px;
display:inline-block;
text-align:center;
background:rgba(22,22,22,0.7);
border-bottom:1px solid #FF6500;
}
nav ul li a{
line-height:50px;
}
#leftlogo{
width:100%;
height:50px;
}
#logo{
float:left;
height:50px;
width:200px;
background-image:url('../images/smlogo.png');
}
#toggler{
display:inline;
margin:0 2%;
font-size:1.5em;
line-height:50px;
font-weight:bold;
color:#FF6500;
cursor:pointer;
transition:all ease-in 0.2s;
}
#toggler:hover{
text-shadow:0 0 1px #f7f7f7;
}
#container{
margin-top:50px;
height:calc(100% - 80px);
}
.section:hover{
border:none;
padding-top:0;
padding-bottom:0;
}
.button{
width:40%;
margin-left:30%;
margin-right:30%;
}
#contact{
width:90%;
margin-left:auto;
margin-right:auto;
}
.template{
width:45%;
}
}
@media only screen and (max-width:768px){
main{
padding:5px;
font-size:0.9em;
}
nav ul{
overflow-y:auto;
}
nav{
-webkit-box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
-moz-box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
}
#logo{
width:100px;
height:25px;
margin-top:12.5px;
margin-bottom:12.5px;
}
.leftimage{
display:none;
}
.rightimage{
display:none;
}
.lefttext{
width:100%;
}
.righttext{
width:100%;
}
.section:hover{
border:none;
padding-top:0;
padding-bottom:0;
}
.button{
width:100%;
margin:0;
}
#contact{
width:100%;
margin-left:auto;
margin-right:auto;
}
.button:hover{
width:100%;
margin:0;
}
.template{
width:100%;
height:auto;
}
}