100% width div gets cut off when I scroll right if my browser window is smaller than div's content
I had a problem on my own site with a <div>
that is supposed to have 100% width. The code for it is shown below.
#myDiv {
width: 100%;
height: 160px;
background: #f48;
}
This works great except for the following issue:
When my browser window is smaller than the <div>
's content, and I scroll to the right then my <div>
will move left with the rest of the page rather than occupying 100% of the width of the page's scrollable area.
This issue has been bugging me for a few hours and just recently I realized that many other sites have the same issue. Including F开发者_运维问答acebook.com and Stackoverflow.com just take a look at my snapshots below.
Facebook's Bug:
Stackoverflow's Bug:
Ok, solved it! I just have to set the min-width
property to the width of that <div>
's content.
Thanks anyways guys!
How you tried this? Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}
I've tried width: auto;
and it's helped.
I've solved this issue for myself with display: inline-block
. Here is example: http://jsfiddle.net/z01g0r2d/1/ . Note if you try to set width of the long content as, for example, 200%
the solution stops working.
精彩评论