当前位置: 首页 > 面试题库 >

CSS 100%Height,然后滚动DIV not page

逄边浩
2023-03-14
问题内容

好的,所以我还没有找到答案的问题,所以我决定自己做。

我正在尝试创建100%流畅的布局,从技术上讲,我已经做到了。

但是,我现在要做的是使页面高度达到100%…但是我不希望页面滚动,而我希望内部DIV滚动。

因此,我相信总而言之,我希望它检测视口屏幕的高度,移至100%,然后,如果IF内容比屏幕长,则滚动特定的DIV,而不是页面。

我希望这是有道理的。

提前致谢。贾斯汀


问题答案:









这应该是一个简单的情况

我相信这将适合您的情况

<html>
  <body style="overflow:hidden;">
      <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div>
      <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div>
      <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div>
      <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
  </body>
</html>

此示例将为您提供静态的页眉和页脚,并使导航器和内容区域可滚动。



 类似资料:
  • 我正在使用嵌套的RecycerView。意思是在一个垂直的回收器视图中,我有多个水平的回收器视图 }

  • 我希望能够滚动通过整个页面,但没有滚动条显示。 在Google Chrome中是: 但Mozilla Firefox和Internet Explorer似乎不是这样工作的。 我也在CSS中尝试过这个: 这确实隐藏了滚动条,但我不能再滚动了。 有没有一种方法,我可以删除滚动条,同时仍然能够滚动整个页面? 请使用CSS或HTML。

  • 问题是当我将页面收缩到某个点时, 元素的顶部溢出,奇怪的是底部没有溢出。说清楚一点,我不想让这两个都溢出来。 这里有一个指向它的JSFiddle链接:https://jsfidle.net/maep468x/1 您将看到,当您运行它并将结果窗口缩小到大约350px时, 元素开始溢出。 我已经尝试从.main-content规则中删除我的line-height和font-size属性,但它仍然溢出。

  • 我基本上试图重现警报标题和消息部分的行为。 标题和消息标签显示在滚动视图中。如果标签文本增加,则警报高度也会随着标签的固有内容大小而增加。但在达到特定高度时,警报高度会停止增加,并且标题和消息文本变得可滚动。 我读过: 文章 自动布局魔法:内容大小优先级 编辑自动布局约束(留档) AutoLayout中的固定宽度动态高度滚动视图 使用UIScrollView自动布局在iOS 堆栈溢出 向布局约束添

  • 我使用JavaFX ListView作为聊天应用程序的聊天室主体。当消息到来或正在发送时,我会添加到listview。这很好,但我总是不得不滚动找到最新的消息。有没有任何方法,我可以自动滚动到底部,以便显示最新的消息,而不必一直向下滚动?

  • 问题内容: 我想知道是否有可能隐藏滚动条,而仍然使用鼠标/键盘启用滚动。 我试图使用CSS: 。效果是禁用滚动条 和 禁用滚动。 问题答案: 供将来参考,还有一个不带jQuery的解决方案-仅使包装div样式包含并使用以下JavaScript两行代码: