html – 如果内容溢出浏览器窗口左侧,是否可以显示滚动条?

html – 如果内容溢出浏览器窗口左侧,是否可以显示滚动条?,第1张

概述当内容大于窗口时,此代码使浏览器具有水平滚动条,溢出到右侧: div.a { position: relative; float: left; background-color: red;}div.b { position: absolute; top: 100%; left: 100%; background-color: blue; white-space: @H_403_0@当内容大于窗口时,此代码使浏览器具有水平滚动条,溢出到右侧:
div.a {  position: relative;  float: left;  background-color: red;}div.b {  position: absolute;  top: 100%;  left: 100%;  background-color: blue;  white-space: nowrap;}
<div >Text1  <div >    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2  </div></div>

但是如果我将第一个div浮动到右边然后第二个位于它左边,浏览器就不会创建一个水平滚动条,并且无法查看溢出的文本.

div.a {  position: relative;  float: right;  background-color: red;}div.b {  position: absolute;  top: 100%;  right: 100%;  background-color: blue;  white-space: nowrap;}
<div >  Text1  <div >    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2  </div></div>

我可以以某种方式更改此行为,如果内容大于窗口,可以向左滚动,向左溢出?

在FF 47,IE 11,Opera 38上测试 – 都做同样的事情.

如果HTML / CSS无法更改此行为,浏览器选择执行目前的 *** 作的原因是什么?他们有什么理由不能“固定”吗?对于仅适用于从右到左语言的网站,目前的行为是否也会出现问题,我认为这些网站可以使用这样的布局?

解决方法 因为你有一个非常具体的例子,这样的东西会为你工作吗?我确实必须使用一个小jquery(你可以使用JavaScript).如果您没有任何其他会受到影响的内容,您可以在HTML标记上放置一个rtl并保持您在元素上的绝对位置.
if ($("#b").prop('scrollWIDth') > $("body").wIDth() ) { //Security Check  $('HTML').CSS('direction','rtl');}else {  $('HTML').CSS('direction','ltr');}
div.a{  position: relative;  float: right;  background-color: red;}div.b{  position: absolute;  top: 100%;  right: 100%;  background-color: blue;  white-space: nowrap;}
<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/2.1.1/jquery.min.Js"></script><div  ID="a">  Text1  <div  ID="b">    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2  </div></div>
总结

以上是内存溢出为你收集整理的html – 如果内容溢出浏览器窗口左侧,是否可以显示滚动条?全部内容,希望文章能够帮你解决html – 如果内容溢出浏览器窗口左侧,是否可以显示滚动条?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1132271.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存