html & css 不需要的水平溢出，如果页面在垂直方向上变得太宽
html & css unwanted horizontal overflow, if page becomes too wide vertically
我有一个内容框，其中包含一个标准的 lorem ipsum 文本。
就像这样，页面看起来就像它应该的那样：
但是，当我向内容框中添加更多内容时，它在垂直方向上变得太宽了，出于某种原因，页面在水平方向上也变得太宽了：
代码(HTML):
<!-- Copyright © 2015 Enter|Elysium -->
<!-- Template made by Joonas Coatanéa -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is the Enter|Elysium theme.">
<meta name="keywords" content="Enter|Elysium,theme">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="jQuery/jQuery.js"></script>
<script type="text/javascript" src="js/navbarController.js"></script>
<title>Enter|Elysium - Welcome!</title>
</head>
<body>
<div id="responsiveContainer">
<a class="nFx" href="#" alt="EnterElysium">
<p class="logoText">E<span class="sFSize">NTER</span>E<span class="sFSize">LYSIUM</span></p>
<img id="EnterElysiumLogo" src="images/EnterElysiumLogo.png" width="149" height="111" alt="EnterElysium"/>
</a>
<a class="nFx" href="https://www.youtube.com/user/EnterElysium" alt="Watch my videos" target="new">
<img id="youtube" align="right" src="images/YouTube-Icon.png" width="50" height="36" alt="Watch my videos"/>
</a>
<a class="nFx" href="http://www.twitch.tv/enterelysium" alt="Watch my streams" target="new">
<img id="twitch" align="right" src="images/Twitch-Icon.png" width="50" height="51" alt="Watch my streams"/>
</a>
<a class="nFx" href="https://www.facebook.com/EnterElysiumYT" alt="Follow me on Facebook" target="new">
<img id="facebook" align="right" src="images/Facebook-Icon.png" width="40" height="40" alt="Follow me on Facebook"/>
</a>
<a class="nFx" href="https://twitter.com/EnterElysium" alt="Follow me on Twitter" target="new">
<img id="twitter" align="right" src="images/Twitter-Icon.png" width="50" height="50" alt="Follow me on Twitter"/>
</a>
<a class="nFx" href="https://plus.google.com/+EnterElysium/posts" alt="Follow me on Google+" target="new">
<img id="googlePlus" align="right" src="images/GooglePlus-Icon.png" width="40" height="40" alt="Follow me on Google+"/>
</a>
<a class="nFx" href="https://www.patreon.com/EnterElysium" alt="Support me on Patreon" target="new">
<img id="patreon" align="right" src="images/Patreon-Icon.png" width="40" height="40" alt="Support me on Patreon"/>
</a>
<div id="navbar">
<ul>
<li><a class="activeNavA" href="#">Active Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
</ul>
</div>
<div id="siteContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.</p>
</div>
</div>
</body>
</html>
代码(CSS):
/* Copyright © 2015 Enter|Elysium */
/* Template made by Joonas Coatanéa */
/* Fonts Section */
@font-face {
font-family: SourceSansProBold;
src: url(../fonts/SourceSansPro-Bold.otf);
}
@font-face {
font-family: SourceSansProRegular;
src: url(../fonts/SourceSansPro-Regular.otf);
}
/* End Of Fonts Section */
/* Do not change the code below, if you are not sure of what you are doing! */
*, body {
margin: 0;
padding: 0;
}
/* Do not change the code above, if you are not sure of what you are doing! */
/* Website Background Color Section */
body {
background-color: #005399;
}
/* End Of Website Background Color Section */
/* Do not change the code below, if you are not sure of what you are doing! */
#responsiveContainer {
width: 100vw;
}
/* Do not change the code above, if you are not sure of what you are doing! */
/* Logo Section */
.logoText {
color: #FFFFFF;
font-family: SourceSansProBold;
font-size: 70px;
text-shadow: 0px 4px 0px #000000;
display: inline;
}
.sFSize {
font-size: 50px;
}
#EnterElysiumLogo {
margin-top: 50px;
margin-bottom: -15px;
}
/* End Of Logo Section */
/* Navbar Section */
#navbar {
height: 40px;
background-color: #FFFFFF;
box-shadow: 0px 2px 0px #000000;
width: 100vw;
}
#navbar ul {
list-style-type: none;
text-align: center;
}
#navbar ul li {
display: inline;
vertical-align: middle;
line-height: 40px;
margin-left: 5px;
margin-right: 5px;
}
/* End Of Navbar Section */
/* Website Icons Section */
#youtube {
margin-top: 120px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#youtube:hover {
width: 40px;
height: 29px;
}
#twitch {
margin-top: 113px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#twitch:hover {
width: 40px;
height: 41px;
}
#facebook {
margin-top: 116px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#facebook:hover {
width: 30px;
height: 30px;
}
#twitter {
margin-top: 116px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#twitter:hover {
width: 40px;
height: 40px;
}
#googlePlus {
margin-top: 117px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#googlePlus:hover {
width: 30px;
height: 30px;
}
#patreon {
margin-top: 118px;
margin-right: 8px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#patreon:hover {
width: 30px;
height: 30px;
}
/* End Of Website Icons Section */
/* Link Section */
.nFx {
text-decoration: none;
}
.activeNavA {
background-color: #01345E;
padding-top: 11px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
color: #005399;
font-family: SourceSansProRegular;
transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
.activeNavA:hover {
background-color: #004680;
}
.activeNavA:visited {
color: #005399;
}
.navA {
background-color: #E0E0E0;
padding-top: 10px;
padding-bottom: 9px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
color: #005399;
font-family: SourceSansProRegular;
transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
.navA:hover {
background-color: #01345E;
}
.navA:visited {
color: #005399;
}
/* End Of Link Section */
/* Site Content Section */
#siteContent {
background-color: #FFF;
width: 50%;
margin: 0 auto;
margin-top: 80px;
text-align: center;
font-family: SourceSansProRegular;
box-shadow: 0px 1px 10px #000000;
margin-bottom: 50px;
}
/* End Of Site Content Section */
试试这个：
body{
overflow-x: hidden;
overflow-y: scroll;
}
它允许垂直滚动但不能水平滚动！
容器宽度不要使用 100vw 单位，因为 vw 使用视口的大小，不包括滚动条。我将 #responsiveContainer 和 #navbar 的宽度改为 100%，现在它可以正常工作了。
关于大众单位的更多信息：https://css-tricks.com/viewport-sized-typography/
我有一个内容框，其中包含一个标准的 lorem ipsum 文本。
就像这样，页面看起来就像它应该的那样：
但是，当我向内容框中添加更多内容时，它在垂直方向上变得太宽了，出于某种原因，页面在水平方向上也变得太宽了：
代码(HTML):
<!-- Copyright © 2015 Enter|Elysium -->
<!-- Template made by Joonas Coatanéa -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is the Enter|Elysium theme.">
<meta name="keywords" content="Enter|Elysium,theme">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="jQuery/jQuery.js"></script>
<script type="text/javascript" src="js/navbarController.js"></script>
<title>Enter|Elysium - Welcome!</title>
</head>
<body>
<div id="responsiveContainer">
<a class="nFx" href="#" alt="EnterElysium">
<p class="logoText">E<span class="sFSize">NTER</span>E<span class="sFSize">LYSIUM</span></p>
<img id="EnterElysiumLogo" src="images/EnterElysiumLogo.png" width="149" height="111" alt="EnterElysium"/>
</a>
<a class="nFx" href="https://www.youtube.com/user/EnterElysium" alt="Watch my videos" target="new">
<img id="youtube" align="right" src="images/YouTube-Icon.png" width="50" height="36" alt="Watch my videos"/>
</a>
<a class="nFx" href="http://www.twitch.tv/enterelysium" alt="Watch my streams" target="new">
<img id="twitch" align="right" src="images/Twitch-Icon.png" width="50" height="51" alt="Watch my streams"/>
</a>
<a class="nFx" href="https://www.facebook.com/EnterElysiumYT" alt="Follow me on Facebook" target="new">
<img id="facebook" align="right" src="images/Facebook-Icon.png" width="40" height="40" alt="Follow me on Facebook"/>
</a>
<a class="nFx" href="https://twitter.com/EnterElysium" alt="Follow me on Twitter" target="new">
<img id="twitter" align="right" src="images/Twitter-Icon.png" width="50" height="50" alt="Follow me on Twitter"/>
</a>
<a class="nFx" href="https://plus.google.com/+EnterElysium/posts" alt="Follow me on Google+" target="new">
<img id="googlePlus" align="right" src="images/GooglePlus-Icon.png" width="40" height="40" alt="Follow me on Google+"/>
</a>
<a class="nFx" href="https://www.patreon.com/EnterElysium" alt="Support me on Patreon" target="new">
<img id="patreon" align="right" src="images/Patreon-Icon.png" width="40" height="40" alt="Support me on Patreon"/>
</a>
<div id="navbar">
<ul>
<li><a class="activeNavA" href="#">Active Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
</ul>
</div>
<div id="siteContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus turpis id justo viverra accumsan. Suspendisse non porta turpis. Etiam auctor iaculis nunc, a dignissim leo porta eu. Maecenas sit amet sem ac odio mollis blandit condimentum et lacus. In bibendum felis non enim tempor, id lobortis nisl convallis. Donec consequat interdum mauris, sit amet mollis libero placerat pulvinar.</p>
</div>
</div>
</body>
</html>
代码(CSS):
/* Copyright © 2015 Enter|Elysium */
/* Template made by Joonas Coatanéa */
/* Fonts Section */
@font-face {
font-family: SourceSansProBold;
src: url(../fonts/SourceSansPro-Bold.otf);
}
@font-face {
font-family: SourceSansProRegular;
src: url(../fonts/SourceSansPro-Regular.otf);
}
/* End Of Fonts Section */
/* Do not change the code below, if you are not sure of what you are doing! */
*, body {
margin: 0;
padding: 0;
}
/* Do not change the code above, if you are not sure of what you are doing! */
/* Website Background Color Section */
body {
background-color: #005399;
}
/* End Of Website Background Color Section */
/* Do not change the code below, if you are not sure of what you are doing! */
#responsiveContainer {
width: 100vw;
}
/* Do not change the code above, if you are not sure of what you are doing! */
/* Logo Section */
.logoText {
color: #FFFFFF;
font-family: SourceSansProBold;
font-size: 70px;
text-shadow: 0px 4px 0px #000000;
display: inline;
}
.sFSize {
font-size: 50px;
}
#EnterElysiumLogo {
margin-top: 50px;
margin-bottom: -15px;
}
/* End Of Logo Section */
/* Navbar Section */
#navbar {
height: 40px;
background-color: #FFFFFF;
box-shadow: 0px 2px 0px #000000;
width: 100vw;
}
#navbar ul {
list-style-type: none;
text-align: center;
}
#navbar ul li {
display: inline;
vertical-align: middle;
line-height: 40px;
margin-left: 5px;
margin-right: 5px;
}
/* End Of Navbar Section */
/* Website Icons Section */
#youtube {
margin-top: 120px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#youtube:hover {
width: 40px;
height: 29px;
}
#twitch {
margin-top: 113px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#twitch:hover {
width: 40px;
height: 41px;
}
#facebook {
margin-top: 116px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#facebook:hover {
width: 30px;
height: 30px;
}
#twitter {
margin-top: 116px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#twitter:hover {
width: 40px;
height: 40px;
}
#googlePlus {
margin-top: 117px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#googlePlus:hover {
width: 30px;
height: 30px;
}
#patreon {
margin-top: 118px;
margin-right: 8px;
transition: height 0.5s, width 0.5s;
-moz-transition: height 0.5s, width 0.5s;
-webkit-transition: height 0.5s, width 0.5s;
-o-transition: height 0.5s, width 0.5s;
}
#patreon:hover {
width: 30px;
height: 30px;
}
/* End Of Website Icons Section */
/* Link Section */
.nFx {
text-decoration: none;
}
.activeNavA {
background-color: #01345E;
padding-top: 11px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
color: #005399;
font-family: SourceSansProRegular;
transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
.activeNavA:hover {
background-color: #004680;
}
.activeNavA:visited {
color: #005399;
}
.navA {
background-color: #E0E0E0;
padding-top: 10px;
padding-bottom: 9px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
color: #005399;
font-family: SourceSansProRegular;
transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
.navA:hover {
background-color: #01345E;
}
.navA:visited {
color: #005399;
}
/* End Of Link Section */
/* Site Content Section */
#siteContent {
background-color: #FFF;
width: 50%;
margin: 0 auto;
margin-top: 80px;
text-align: center;
font-family: SourceSansProRegular;
box-shadow: 0px 1px 10px #000000;
margin-bottom: 50px;
}
/* End Of Site Content Section */
试试这个：
body{
overflow-x: hidden;
overflow-y: scroll;
}
它允许垂直滚动但不能水平滚动！
容器宽度不要使用 100vw 单位，因为 vw 使用视口的大小，不包括滚动条。我将 #responsiveContainer 和 #navbar 的宽度改为 100%，现在它可以正常工作了。
关于大众单位的更多信息：https://css-tricks.com/viewport-sized-typography/