屏幕右侧的侧边栏扩展的居中布局

我试图创建一个固定的布局，侧边栏的背景延伸到最右侧。我画了一个草图来说明图像：屏幕右侧的侧边栏扩展的居中布局

enter image description here

我怎么会去扩展侧栏背景延伸至右侧屏幕的结束，在任何窗口的大小？我试着用：

#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)}) 
});

来源

2012-10-10 Michelle

-1

设定的主体为100％

body { 
height: 100%; 
}

然后设置栏高度“身高：自动;“。这将使其延伸到视口的高度。从那里，像你说的那样添加固定的定位。

来源

2012-10-10 18:55:54 Xarcell

-1

你可以这样做：

overflow-y:hidden

这应该摆脱在底部的滚动条。

我还会在边栏中使用很多右手边填充来扩展它。

来源

2012-10-10 18:58:29

-1

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

来源

2012-10-10 19:07:50 Xarcell

，只有改变容器 – Michelle

-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容器“侧栏父”是什么让宽度和包含的背景。

要将它们居中，您需要使用width: 50%;父容器，用于内容和边栏。您使这些float:left;填充其父容器中的屏幕，然后填充内容子容器float: right;和侧边栏子容器float: left;。

摘要：2个50％宽度的容器，每个容器包含1个子容器。用左浮动将父母叠在一起，然后将固定宽度的儿童容器放在他们的父母身上。

这将以他们为中心，现在你将拥有扩展背景的能力。

来源

2012-10-10 19:19:23 AJStacy

是里面的元素，我是懒惰和使用的颜色名称，而不是十六进制代码.... – AJStacy

如果您的问题只是在于滚动，你可以很容易地与这条线

overflow-x: hidden;

解决这个问题，它完全适用于背景的家长或body元素。

来源

2013-04-29 20:47:54 Unmocked

有没有人在这里或以后？反正，我想你应该静态位置和隐藏的溢出象下面这样：

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

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

希望是正确的和有益的......

来源

2013-07-16 09:52:34

屏幕右侧的侧边栏扩展的居中布局

回答

相关问题