1

我有一个内容框,其中包含标准的 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 */
4

2 回答 2

5

不要使用 100vw 单位作为容器宽度,因为 vw 使用视口的大小,而不包括滚动条。#responsiveContainer我将和的宽度#navbar改为 100%,现在它可以正常工作了。

JSFiddle 为您服务

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

于 2015-09-30T14:17:42.227 回答
0

尝试这个:

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

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

于 2015-09-30T14:12:33.653 回答