html＆amp; css不需要的水平溢出，如果页面垂直变得太宽

时间：2015-09-30 14:09:18

标签： html css css3 horizontal-scaling

我有一个内容框，其中包含标准的lorem ipsum文本。 像这样，页面看起来应该像它应该： Template

但是当我在内容框中添加更多内容以使其在垂直方向上变得太宽时，由于某种原因，页面也会在水平方向上变得过宽： Template problem

代码（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 */

2 个答案:

答案 0 :(得分：5)

不要将100vw单位用于容器宽度，因为vw使用视口的大小，而不包括滚动条。我将#responsiveContainer和#navbar的宽度更改为100％，现在它可以正常运行。

JSFiddle for you

有关大众单位的更多信息：https://css-tricks.com/viewport-sized-typography/

答案 1 :(得分：0)

试试这个：

body{
  overflow-x: hidden;
  overflow-y: scroll;
}

它允许垂直滚动但不能水平滚动！

相关问题
最新问题