将div伸展到屏幕的边缘

Question

我正在尝试制作一个菜单，它可以伸展到浏览器的右边缘，并具有任何屏幕宽度。这是我想做的事： http://imgur.com/EmMWLYd

我使用position: absolute;和width: 100%;使#greenbar到#menu DIV外伸展。但它涵盖了宽度上的所有菜单，而不仅仅是在右侧。

HTML：

<header id="nav"> 
     <h1><a href="#">Title</a></h1> 
     <div id="menu"> 
      <ul> 
       <li class="menu_button"><a>button1</a></li> 
       <li class="menu_button"><a>button2</a></li> 
       <li class="menu_button"><a>button3</a></li> 
       <li class="menu_button"><a>button4</a></li> 
       <li id="greenbar"></li> 
      </ul> 
     </div>   
</header> 

CSS：

#menu{ 
    float: right; 
    margin-top: 35px; 
} 

.menu_button{ 
    display: block; 
    float: left; 
    padding: 16px 25px; 
    background-color: #39b54a; 
    color: #fff; 
    border-right: 1px solid #fff; 
} 

.menu_button:hover{ 
    background-color: #fff; 
    color: #39b54a; 
    -webkit-transition: background-color 300ms ease-in-out; 
    -moz-transition: background-color 300ms ease-in-out; 
    -o-transition: background-color 300ms ease-in-out; 
    transition: background-color 300ms ease-in-out; 
} 

.menu_button a:hover{ 
} 

.menu_button a{ 
    float: left; 
    font-family: "Gotham"; 
    text-transform: uppercase; 
} 

#greenbar{ 
    float: right; 
    padding: 24px; 
    background-color: #39b54a; 
} 

Answer 1

据我理解你想要什么，你可以使用padding-left所以DIV不会达到的边缘屏幕的左侧。

Answer 2

我不确定你为什么使用绝对位置？这是我会做什么减去过渡。

#nav {background:#39b54a;} 
#nav:after,#menu> ul:after{content:''; display:block; visability:hidden;clear:both;}/*doesn't work in ie5 or 6*/ 
/*use clear:both; on the last element*/ 
#menu {float:right;} 
#menu> ul> li {float:left;} 

哪里有浮标。不要忘记清除它们。

Answer 3

我想你正在尝试为跨越整个页面的导航栏添加背景颜色。如果是这样的情况下，更新#menu像这样：

#menu{ 
    float: right; 
    margin-top: 35px; 
    width: 100%; 
    background: #39b54a; 
} 

更新时间：你可以用你的menu格在menu-wrapper并创建一个左边距偏移：

<header id="nav"> 
     <h1><a href="#">Title</a></h1> 
     <div id="menu-wrapper"> 
      <div id="menu"> 
       <ul> 
        <li class="menu_button"><a>button1</a></li> 
        <li class="menu_button"><a>button2</a></li> 
        <li class="menu_button"><a>button3</a></li> 
        <li class="menu_button"><a>button4</a></li> 
       </ul> 
      </div>  
     </div> 
</header> 

工作实例：http://jsfiddle.net/gkwpwwyg/1/

Answer 4

我不确定这可以帮助你，但我认为是。

使用表格作为包装，以便您可以定位它。

HTML：

<header id="nav"> 
<table id="menu_table"> 
    <tr> 
    <td class="menu_button"> 
    <a href="#" class="menu_a">button 1</a> 
    </td> 
    <td class="menu_button"> 
    <a href="#" class="menu_a">button 2</a> 
    </td> 
    <td class="menu_button"> 
    <a href="#" class="menu_a">button 3</a> 
    </td> 
    <td class="menu_button"> 
    <a href="#" class="menu_a">button 4</a> 
    </td> 
    <td id="greenbar"> 
    &nbsp; 
    </td> 
    </tr> 
</table> 
</header> 

CSS：

#menu_table { 
    width: 80%; 
    position: absolute; 
    left: 20%; //make the table away from edge 20% of SCREEN 
} 

.menu_button{ 
    padding: 16px 25px; 
    background-color: #39b54a; 
    color: #fff; 
    border-style: solid; 
    border-color: #fff; 
    border-width: 0px 1px 0px 0px; /*this will add space between button*/ 
    width: 20%; //width is 20% of table's width 
    } 

.menu_button:hover{ 
    background-color: #fff; 
    color: #39b54a; 
    -webkit-transition: background-color 300ms ease-in-out; 
    -moz-transition: background-color 300ms ease-in-out; 
    -o-transition: background-color 300ms ease-in-out; 
    transition: background-color 300ms ease-in-out; 
} 

.menu_a { 
    font-family: "Gotham"; 
    text-transform: uppercase; 
} 

#greenbar{ 
    width: 20%; 
    padding: 24px; 
    background-color: #39b54a; 
    margin: 0px; 
} 

我是新来的编码。如果出现问题，请道歉。

Answer 5

好吧，我说这个我#menu DIV：

position: absolute; 
right: 0; 
width: 50%; 

现在菜单粘在屏幕的右侧边缘，然后我从#greenbar DIV去除float: right。

我的菜单现在占用了屏幕的50％，并且绿条延伸到边缘。