在我目前正在构建的网站中，我有一个侧边栏导航，它填充了窗口左侧 10% 的区域，还有一个内容填充了窗口右侧另外 90% 的区域。
当我将窗口捕捉到屏幕的左侧或右侧(许多用户可能会如此)时，内容文本溢出并创建了一个水平滚动条，在这种情况下这很令人厌恶。
现在，我将如何让内容中的文本响应视口(viewport)？我知道我缺少一个简单的解决方案。
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>About</title>
<!-- CSS -->
<link href="assets/css/normalize.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Sintony' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates' rel='stylesheet' type='text/css'>
<!-- /CSS -->
</head>
<body>
<div id="sidebar">
<ul>
<li><a class="active" href="about.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="side-footer">
<p><a href="mailto:business@darmisdigitaldesigns.net?subject=Website">Contact Webmaster</a><br />© DDD 2012-2014</p>
</div>
</div>
<div id="content">
<div id="content-wrap">
<h1>About</h1>
<hr>
<p> Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</body>
</html>
所有 CSS:
body {
font: 16px/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #EEE;
margin: 0;
padding: 0;
color: #000;
height: 100%;
width: 100%;
clear: right;
}
/***********/
/* Sidebar */
/***********/
#sidebar {
width: 10%;
height: 100%;
margin: 0 auto;
background-color: rgb(40,40,40);
/*border-right: 1px solid rgb(30,30,30);*/
box-shadow: -2px 0 2px -2px #222;
position: absolute;
float: left;
overflow: hidden;
}
#sidebar ul {
list-style: none;
padding-top: 10px;
margin: 0;
float: right;
}
#sidebar ul li {
width: 100%;
padding: 5px 0;
}
#sidebar ul li a {
text-decoration: none;
padding: 8px;
font-weight: bold;
font-family: 'Sintony', sans-serif;
color: #FFF;
margin: 0;
float: right;
font-size: 1em;
}
#sidebar ul li:first-child a:hover, #sidebar ul li:first-child a.active {
background-color: rgba(255,255,255,0.35);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#sidebar ul li:nth-child(2) a:hover, #sidebar ul li:nth-child(2) a.active {
background-color: rgba(255,255,255,0.35);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#sidebar ul li:last-child a:hover, #sidebar ul li:last-child a.active {
background-color: rgba(255,255,255,0.35);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#side-footer {
text-align: right;
position: absolute;
bottom: 0px;
left: 0px;
right: 8px;
}
#sidebar #side-footer p{
color: #FFF;
line-height: 1.5em;
font-weight: bold;
font-size: 0.5em;
}
#sidebar #side-footer a {
font-size: 1.15em;
color: #FFF;
}
/***************/
/* END Sidebar */
/***************/
#content {
width: 85.5%;
height: 95%;
margin-left: 12%;
position: absolute;
}
#content-wrap {
margin: 0 auto;
width: 960px;
height: 100%;
}
#content p {
font-size: 0.85em;
text-indent: 1.5625em;
margin: 0;
padding: 0;
line-height: 1.25em;
}
#content h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat Alternates', sans-sarif;
text-indent: 1.5625em;
line-height: 0.3125em;
}
#content hr {
width: 100%;
float: left;
line-height: 5px;
}
最佳答案
对于初学者:我会避免使用百分比作为宽度，因为浏览器窗口会发生变化。我会改用响应式设计。我确实建议响应式设计的唯一原因是因为您将您的帖子标记为响应式设计，所以我假设您想要转向该路线。
设计越简单，设置就越容易，但是设置响应式设计比常规的 css 样式表要花费更多的精力。以下是我构建的响应式模板的一些提示和示例。
好的，我所做的是设置多个样式表并使用 css 来定义屏幕尺寸。以下是一些示例，因为为响应式设计修改代码将花费太长时间。习惯使用响应式网站需要一点时间，因为需要修改和设置的内容更多，而且您确实必须找到适合您的网站...但这就是适合我的。
mainstylesheet.css - 此样式表适用于不会真正受到响应式设计影响的内容。这可以是任何颜色，从配色方案的颜色、背景颜色，如果他们不希望它们被修改，甚至可以是列颜色。这是使用没有响应修饰符的纯 css 设置的
设置主样式表后，您可以设置响应式样式表，这些样式表会根据屏幕/浏览器窗口的大小而变化。每个样式表都必须包含在您想要使用响应式设计的每个页面上。这些都可以组合成一个巨大的样式表，但我发现当事情分开时更容易管理。在每一行的顶部，您将添加以下行的变体
完整:
@media only screen
and (min-width : 960px) {
浓缩
@media only screen
and (min-width : 744px)
and (max-width : 959px) {
可扩展
@media only screen
and (max-width : 743px)
and (min-width : 481px) {
手机
@media
only screen and (max-width : 480px),
only screen and (min-device-width : 320px) and (max-device-width : 480px) {
(不要忘记在每个样式表末尾添加一个额外的 } 以及关闭 @media 标签。)
我的每个样式表还有一个隐藏的 div 类，如下所示:
.hidecontent_mobile { display: none !important;}
与可扩展、压缩和完整相同，因为我将这些类添加到我不想在每个不同版本中显示的内容中。
那么，解释一下如何使用您的代码进行设置...
1) 假设您希望侧边栏在每个版本中的大小都发生变化，但您希望它在移动版本中消失。您要做的是，对于每个样式表，您将添加 #sidebar { width: *width*; }然后在您的 html 中添加 <div id="sidebar" class="hidecontent_mobile">完成所有操作后，侧边栏将根据屏幕宽度进行调整，并在移动版本上消失。
部分代码可能需要更改以满足您的需要。我将它从我正在处理的现有元素中拉出来给你举个例子。
如果您对此有任何其他问题，请告诉我，我会尽力回答。
关于html - 使文本响应视口(viewport)？删除水平滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20149501/