将DIV宽度扩展到屏幕宽度
[英]Extend DIV width to screen width
问题描述
Especially at low screen resolution, the screen can have an horizontal scrollbar. 
特别是在屏幕分辨率较低的情况下，屏幕可以具有水平滚动条。 I want to expand div length to end of the scrollbar. 我想将div长度扩展到滚动条的末尾。 So, width of div may bigger than 100%. 因此，div的宽度可能大于100％。
#content{border:2px solid red}
<body> <div id="content">Test</div> <div id="wrap"> NoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapText </div> </body>
I want to expand the content width to screen width. 我想将content宽度扩展到屏幕宽度。
How can I do this? 我怎样才能做到这一点？
Thanks 谢谢
3 个解决方案
解决方案1
3 已采纳 2016-06-10 09:06:27
#content{border:2px solid red} body { display:table; }
<body> <div id="content">Test</div> <div id="wrap"> NoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapText </div> </body>
解决方案2
1 2016-06-10 09:23:12
Check it out the answer : do u want this? 看看答案：你想要这个吗？
https://jsfiddle.net/sesn/mh9juu1w/ https://jsfiddle.net/sesn/mh9juu1w/
I have added the function to calculate the text width Here 我添加了计算文本宽度的功能
$(function(){
$.fn.textWidth = function () {
$body = $('body');
$this = $(this);
$text = $this.text();
if($text=='') $text = $this.val();
var calc = '<div style="clear:both;display:block;visibility:hidden;"><span style="width;inherit;margin:0;font-family:' + $this.css('font-family') + ';font-size:' + $this.css('font-size') + ';font-weight:' + $this.css('font-weight') + '">' + $text + '</span></div>';
$body.append(calc);
var width = $('body').find('span:last').width();
$body.find('span:last').parent().remove();
return width;
};
wrapWidth = $('#wrap').textWidth();
$('#content').width(wrapWidth);
});
解决方案3
0 2016-06-10 09:09:10
write the css for the #wrap div and set width 100%; 为#wrap div编写CSS并将宽度设置为100％；
example 例
div#wrap {
width: 100%;
display: inline-block;
word-break: break-all;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.