开发者

Div go out of viewport (like the StackOverflow bar at the top)

开发者 https://www.devze.com 2023-03-18 07:38 出处:网络
You\'ve probably seen the toolbar from StackOverflow (at the top of this page), how it hangs outside the viewport. Both of the edges hang off the page and so does the top. I have tried this so many ti

You've probably seen the toolbar from StackOverflow (at the top of this page), how it hangs outside the viewport. Both of the edges hang off the page and so does the top. I have tried this so many times but can't find an answer. How would I make a div behave like this- in html, css, or javascript- can someone help me? (Po开发者_JAVA技巧sition:fixed; is not what I'm looking for.)


it is just a div, but you have to turn off the paddings in the body that is around:

<body>
   <div class="bar">test</div>
</body>

body{
  margin:0;
  padding:0;  
}

.bar {
  padding:3px;
  background-color:#ff7200;  
}

a div automatically has a width of 100%

a live sample here


If you're talking about the grey bar at the top of the page then it's simply a div styled with a grey background and a negative bottom margin:

#custom-header {
    background-color: #EEEEEE;
    height: 31px;
    margin-bottom: -31px;
}
0

精彩评论

暂无评论...
验证码 换一张
取 消