1

我正在尝试创建一个固定的布局，侧边栏的背景延伸到最右边。我画了一个草图来说明图像：

在此处输入图像描述

在任何窗口大小上，我将如何扩展侧边栏背景以延伸到右侧屏幕的末尾？我试过：

#sidebar {
    z-index: 1000;
    overflow: hidden;
    position: absolute;
    width: 100%;
    background: url(../img/sidebar-base.png) no-repeat 0 -8px;
    min-height: 200px;
    &::after {
        content: '';
        z-index: 10;
        display: block;
        height: 100px;
        overflow: hidden;
        width: 100%;
        background: url(../img/sidebar-rx.png) repeat-x 0 -9px;
        position: absolute;
        top: 0;
    }
}

但是滚动会水平出现，如果我应用overflow:hidden在身体上，我将无法滚动到底部。谢谢！

编辑：我确实尝试过用 javascript 找到我的运气，但仍然有一点滚动：

$(function(){
    $sidebar = $('#sidebar');
    $sidebar.css({width: window.innerWidth - ($sidebar.offset().left)})
});
4

6 回答 6

0

如果您的问题仅在于滚动，您可以使用此行轻松解决此问题

overflow-x: hidden;

并将其完全应用于背景的父元素或正文元素。

于 2013-04-29T20:47:54.513 回答
0

有没有人关注这里？无论如何，我认为你应该像下面这样静态定位和隐藏溢出：

#sidebar {
        z-index: 1000;
        overflow: hidden;
        position: static;
        width: 100%;
        height:100%;
        right:0;
        top:0;
        margin:0;}

还要隐藏卷轴，你也应该隐藏你的身体溢出。

希望是正确的和有帮助的......

于 2013-07-16T09:52:34.187 回答
-1

你应该做的是创建一个包装 div。

<div class="sidebar-parent">
  <div class="sidebar"><!-- Stuff Here --></div>
</div>

完成后，您的文档应如下所示：

<html>
<head>
  <title>Experiment</title>
  <style type="text/css">
    .content {float: left; width: 49%; height: 500px; border: 1px solid #000;}
    .sidebar-parent {float: left; width: 50%; background-color: green;}
    .sidebar {width: 500px; height: 500px; border: 1px solid #000;}
  </style>
</head>
<body>
  <div class="content">blah blah blah</div>
  <div class="sidebar-parent">
    <div class="sidebar"><!-- Stuff Here -->blah blah blah</div>
  </div>
</body>
</html>

要记住的主要内容是容器 div “sidebar-parent” 是获取宽度并包含背景的内容。

要使它们居中，您需要width: 50%;内容和侧边栏的父容器。你让它们float:left;填满屏幕，然后是它们的父容器中的内容子容器float: right;和侧边栏子容器。float: left;

摘要：2 个 50% 宽度的容器，每个容器包含 1 个子容器。将父母与左浮动堆叠在一起，然后将固定宽度的子容器放置在其父母中。

这将使他们居中，现在您将有能力拥有扩展的背景。

于 2012-10-10T19:19:23.337 回答
-1

将身体设置为 100%

body {
height: 100%;
}

然后将侧边栏高度设置为“height: auto;”。这将使它延伸到视口的高度。从那里，像你说的那样添加固定定位。

于 2012-10-10T18:55:54.607 回答
-1

你可以这样做：

overflow-y:hidden

那应该摆脱底部的滚动条。

然后，我还会在侧边栏中使用大量右手边距来扩展它。

于 2012-10-10T18:58:29.753 回答
-1

尝试将侧边栏宽度设置为 30%，将内容设置为 70%。

于 2012-10-10T19:07:50.363 回答