Question

在我目前正在建设的网站中，我有一个侧边栏导航栏填充了窗口的左侧10％，另一个内容填充了右边90％的内容。

当我将窗口捕捉到屏幕的左侧或右侧时（尽可能多的用户），内容文本溢出并创建一个水平滚动条，在这种情况下令人作呕。

现在，我将如何使内容中的文本响应视口？我知道有一个简单的解决方案，我很遗憾。

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 />&copy; 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;
}

Answer 1

对于初学者：我会避免使用百分比作为宽度，因为浏览器窗口会发生变化。我会转而使用响应式设计。我建议响应式设计的唯一原因是因为您将帖子标记为响应式设计，因此我假设您想要转移到该路线。

设计越简单，设置越容易，但设置响应式设计需要花费更多精力，而不是常规的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">一旦完成所有内容，您的侧边栏将根据屏幕宽度进行调整并将消失在移动版本时。

可能需要更改某些代码以满足您的需求。我把它从现有的项目中拉出来，我正在努力给你一个例子。

如果您对此有任何进一步的问题，请告诉我，我会尽力回答。

Answer 2

您尚未指定页面的宽度（以像素为单位）。这是让你的事情发挥作用所必需的。

例如，我会用这个：

body { max-width: 980px; width: 100%;}

#sidebar { width: 90%; }

当然，如上所述，使用media queries和external stylesheet很高兴，但这意味着您要加载多个样式表，这会使您的网站变慢。这对网站的SEO不利，因为Google不喜欢这样。

使文本响应视口？删除水平滚动条

2 个答案: