Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
506 views
in Technique[技术] by (71.8m points)

html - CSS position absolute full width problem

i have 2 divs and a dl:

<div id="wrap">
 <div id="header">
  <dl id="site_nav_global_primary">

and this is my style:

#wrap {
margin:0 auto;
width:100%;
min-width:760px;
max-width:1003px;
overflow:hidden;
}

#header {
width:100%;
position:relative;
float:left;
padding-top:18px;
margin-bottom:29px;
}

#site_nav_global_primary {    
float:right;
margin-right:18px;
margin-bottom:11px;
margin-left:18px;
}

Now i want to change site_nav_global_primary to have a full screen width without changing the wrap and the header. but when i try:

#site_nav_global_primary {    
position: absolute;
width:100%;
top:0px;
left:0px;
}

The navigaation gets the 100% of the wrapper which is max 1003px width. i want it to stretch to the maximum without changing the wrap and header divs.

Is this possible?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You could set both left and right property to 0. This will make the div stretch to the document width, but requires that no parent element is positioned (which is not the case, seeing as #header is position: relative;)

#site_nav_global_primary {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

Demo at: http://jsfiddle.net/xWnq2/, where I removed position:relative; from #header


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...