{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 聊天终结者 的问题《How to style a div to have a background color for》','https://www.manongdao.com/q-1202433.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have an HTML page that for the sake of this question looks like this:
<html>
<head>
<style>
div { width: 100%; }
.success { background-color: #ccffcc; }
</style>
</head>
<body>
<div class="success">
<nobr>This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line.</nobr>
</div>
</body>
</html>
Note the "very long line", and the background color of that div.
My problem (and I bet it is a basic one) is that the background-color stops at the edge of the screen. When I scroll out to the right to see the rest of the text, the rest of the text background is white.
Basically I want my div to behave like this:
- To have the specified background color
- To minimum have the same width as the screen, even if the text within is just a few words
- To follow the width of the text, if it is more than the width of the screen
- Optionally (and I know this is really a different, follow-up, question), if I have more than one such div, following the first, is there a way to have the two follow the width of the widest div automatically?
Did that make any sense?
Is there any way to do this?
I have set up a test page here, which, if you view this on iPhone, although a small font, shows the problem: http://www.vkarlsen.no/test/test.html
I saw the following questions listed as potential duplicates/suggestions by SO, here's what I noticed when I tried the information within:
iPad background for div blocks not spanning entire width of screen
Tried the suggested
<meta ... viewport .../>tag, did not make a difference (it is present in the test page right now.)Background color stretches accross entire width of ul
<div>s are already block elementsWebKit doesn't paint background-color for entire width of final inline list item
Tried setting the div to
display: inline-block;but this did not appear to change anything
Try this,
The problem seems to be that
blockelements only scale up to 100% of their containing element, no matter how big their content is—it just overflows. However, making theminline-blockelements apparently resizes their width to their actual content.HTML:
CSS:
(The
containerelement addresses your follow-up question to make the seconddivas big as the previous one, and not just the screen width.)I also set up a JS fiddle showing my demo code.
If you run into any troubles (esp. cross-browser issues) with
inline-block, looking at Block-level elements within display: inline-block might help.The
inline-blockdisplay style seems to do what you want. Note that the<nobr>tag is deprecated, and should not be used. Non-breaking white space is doable in CSS. Here's how I would alter your example style rules:Alter your stylesheet, remove the
<nobr>tags from your source, and give it a try. Note thatdisplay: inline-blockdoes not work in every browser, though it tends to only be problematic in older browsers (newer versions should support it to some degree). My personal opinion is to ignore coding for broken browsers. If your code is standards compliant, it should work in all of the major, modern browsers. Anyone still using IE6 (or earlier) deserves the pain. :-)The width is being restricted by the size of the body. If you make the width of the body larger you will see it stays on one line with the background color.
To maintain the minimum width: min-width:100%
It is because you set the
width:100%which by definition only spans the width of the screen. You want to set themin-width:100%which sets it to the width of the screen... with the ability to grow beyond that.Also make sure you set
min-width:100%forbodyandhtml.or try this,