將DIV寬度擴展爲屏幕寬度

特別是在屏幕分辨率較低時，屏幕可以具有水平滾動條。我想擴展div長度到滾動條的結尾。所以div的寬度可能會大於100％。將DIV寬度擴展爲屏幕寬度

#content{border:2px solid red}

<body> 
 
    <div id="content">Test</div> 
 
    <div id="wrap"> 
 
     NoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapText 
 
    </div> 
 
</body>

我想擴大content寬屏幕寬度。

我該怎麼做？

由於

來源

2016-06-10 selami

#content{border:2px solid red} 
 
body { 
 
display:table; 
 
}

<body> 
 
    <div id="content">Test</div> 
 
    <div id="wrap"> 
 
NoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapText 
 
    </div> 
 
</body>

來源

2016-06-10 09:06:27 Saika

我不想換行功能。我想擴大內容分區。 – selami

檢查編輯代碼，body {display：table;}並刪除文字換行， – Saika

body {display：table;}工作。謝謝。 – selami

寫的#wrap DIV的CSS和設置寬度100％;

例如

div#wrap { 
    width: 100%; 
    display: inline-block; 
    word-break: break-all; 
}

來源

2016-06-10 09:09:10 Maharajan

我不想換字。我想擴大內容分區。 – selami

至少你需要給字 – Maharajan

之間的空格#wrap內容是動態的。也許，它有一個固定寬度的表格。我想擴大內容分區。 – selami

檢查出來的答案是：做ü想呢？

https://jsfiddle.net/sesn/mh9juu1w/

我已經加入到計算文本寬度這裏

$(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); 
});

來源

2016-06-10 09:23:12 SESN

可以，但body {display：table;}就夠了。我提高了你的解決方案。謝謝 – selami

是的..這是非常簡單的高效解決方案.. – SESN

將DIV寬度擴展爲屏幕寬度

回答

相關問題