使元素在整个屏幕上拉伸

Question

我想在整个屏幕上显示我的菜单栏，目前它位于中间，两侧都有空白区域。我希望酒吧沿着页面顶部拉伸，但不要“悬停”。我已经尝试了这个位置：固定并且已经实现了我想要的菜单外观，但是当读者向下滚动页面时我不希望将菜单栏固定到屏幕顶部。我博客的网址如下：http://www.blankesque.com我已在下面的菜单栏中添加了css代码：

#topdropcont { 
width:100%;
height:45px;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position:absolute;
background:#f5f5f5;
}

Answer 1

将position:absolute;更改为position: fixed;

另一个选项是运行以下使用JS

计算宽度的jQuery脚本

$("#wctopdropcont").css('left',($(document).width() - 1080) / 2 * -1).width($(document).width());

Answer 2

我能说出最好的信息（假设我理解您希望自己的网页看起来如何），问题不在您的topdropcount中，而在content-outer中，它似乎指定了一个空格1080像素宽。

Answer 3

如果您不想要固定标题，则必须更改div.content-outer＆amp;的位置属性。 .fauxborder-left to position：static（实际上是相对的）。

Answer 4

这里的问题是你在定义的宽度容器（.content-outer {1080px;}）中使用相对宽度（100％）。您可以通过向#topdropcont添加更大的相对宽度来查看其工作原理。 （例如#topdropcont {width：120％;}）。

您可以通过在该容器外移动菜单标记来轻松解决此问题。

Answer 5

就像@Matthew Darnell所说，您的课程content-outer有以下css样式min-width: 1080px和max-width: 1080px，因此在您的菜单上width 100%将{给它width 1080px。如果您不想在countent-outer之外移动菜单，可以对css进行以下更改：

1）从min-width: 1080px中删除max-width: 1080px和.content-outer 2）将min-width: 1080px，max-width: 1080px和margin: 0 auto添加到您的header代码和.main-outer

这可以解决您的问题。

Answer 6

由于菜单中具有100％宽度的第一个父元素为.content，请确保它具有position: relative，而不是确保所有其他父菜单元素没有设置位置。您可以将菜单容器设置为绝对定位。

最终的CSS应该是：

.content {
    position: relative;
}

.content-outer {
    /* REMOVE: position: relative; */
}

.fauxborder-left {
    /* REMOVE: position: relative; */
}

#wctopdropcont {
    position: absolute;
    /* Fading script should be removed...
       it changes opacity and display, so: */
    display: block !important;
    opacity: 1 !important;
}

你得到的是：