如何使div容器擴展到整個HTML頁面並帶有水平滾動條

我希望div容器可以通過水平滾動條擴展到整個HTML頁面，下面是一張顯示我的問題的圖片。如何使div容器擴展到整個HTML頁面並帶有水平滾動條

的DIV容器不擴展時水平滾動條是必要的。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <script type='text/x-mathjax-config'> 
      MathJax.Hub.Config({ 
       showMathMenu: false, 
       jax: ['input/TeX','output/HTML-CSS'], 
       displayAlign: "left", 
       extensions: ['tex2jax.js','toMathML.js'], 
       TeX: { extensions: ['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js'] }, 
      }); 
     </script> 
     <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js"></script> 
     <style> 
      .titulo{ 
       width:100%; 
       border-bottom:solid 2px; 
       border-color: black; 
       background-color:lightgrey; 
       font-family:arial; 
       font-weight:bold; 
       white-space:nowrap; 
      } 
     </style> 
    </head> 

    <body> 
     <div class="titulo">Data</div> 
     <div>$$\vec{v_r}=\vec{v_1}+\vec{v_2}\\\vec{v_r}=\left(x_1+x_2,\;y_1+y_2\right)$$</span> 
     <div class="titulo">Operations</div> 
     <div>$$\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_r}=\left(1000000,\;3000000\right)+\left(500000,\;2000000\right)\\\vec{v_r}=\left(1000000+500000,\;3000000+2000000\right)\\\vec{v_r}=\left(1500000,\;5000000\right)$$</div> 
    </body> 
</html>

我該如何解決這個問題？我使用MathJax來顯示數學公式，並且我不知道它是否會產生干擾。

來源

2015-01-13 Truck

.titulo {position：relative; top：0;底部：0;左：0;正確：0; } – Kenyanke

.titulo {display：block; }並移除'width：100％'; –

未來的注意事項：cdn.mathjax.org即將到期，請查看https://mathjax.org/cdn-shutting-down獲取遷移提示。 –

當你爲外層div提供width:100%它以100% of the window/document width.但是因爲你的1頁格的文字是不wrapping（沒有空間之間），這樣該分區是走出去的viewport使您獲得的horizontal scrollbar。所以爲了避免這種包裝你的文字，例如。 word-wrap: break-word;使用此css property您的文字將出去。

enter image description here

來源

2015-01-14 07:00:56 Rahul

如何使div容器擴展到整個HTML頁面並帶有水平滾動條

回答

相關問題