zoukankan      html  css  js  c++  java
  • 滚动条与height

    • div上控制显示滚动条要结合overflow属性和布局、高/宽度
      • div的overflow、overflow-x、overflow-y样式
        • inherit:规定应该从父元素继承 overflow 属性的值。
        • hidden:永远不显示滚动条。内容会被修剪,并且其余内容是不可见的。
        • scroll:永远显示滚动条(至少有占位框)。内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
        • auto:根据内容高度自动控制滚动条是否显示。如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容,并有可能导致布局发生改变。
        • visible(默认,不设置时):内容不会被修剪,会呈现在元素框之外(子元素自身宽或高大于元素本身时)。
      • 想要显示滚动条
        • 通常要给div一个固定的height,然后结合overflow样式,才会显示出来滚动条。
          • 即使用了angular的ngx-infinite-scroll也是如此
        • 要不就是把div设置成position: absolute; top: 0px; bottom: 0px;
          • 可能上层div的position要设成relative等
          • 其实这种做法就是让这个div充满上层div,即height为真的生效的100%,而不是通常情况下的父div的高度由子div决定。
          • 这种也算是给了一个固定的height,再结合overflow就可以显示出来滚动条了
          • 然后如果父div中在本div前还有其他div如header,那么可以通过设置本div的margin-top样式来避免重合,这其实也算是有写死的height,只不过不是本div,而是前面的div。这通常适用于前面的header高度固定(即使随着浏览器宽度而不固定,也可以通过@Media来分阶段写死),而希望本div高度不固定,希望尽量大的情况。
          • 但是这种情况有可能由于而position: absolute;带来本div宽度不对的问题,或者滚动条只露出来一个头。这时候可以还是通过设置本div的height的方式来实现,大不了也用@Media在不同的情况下设置不同的height。
      • 正常情况下,如果用了flex布局(Flexible Box,弹性盒子),就变成了一个弹性盒子,不需要手动设置滚动条相关属性,div内部内容多也没关系
        • flex
          • 前端布局神器,用来为盒装模型提供最大的灵活性。
          • 任何一个容器都可以指定为Flex布局。
          • flex容器内所有子元素自动成为容器成员,成为Flex项目(Flex item),简称“项目”。这些项目会延flex-direction属性设置的主轴方向排列(即项目的排列方向)
          • bootstrap提供的row等class其实就是给容器设置了flex属性
        • 但是这个时候如果两个相邻的div,前者有margin属性,那么就会影响下面的div,导致下面的div出现滚动条
    • web页面中的height设置比较特殊
      • 不像width,可以简单的通过百分比或者像素数来控制
      • 父元素的height由子元素的height决定
    • 获取、操作滚动条位置
      • xxx.scrollTop = 200;
  • 相关阅读:
    谈谈golang的netpoll原理(一)
    谈谈高并发秒拍系统架构设计
    Go项目实战:打造高并发日志采集系统(十)
    Go项目实战:打造高并发日志采集系统(九)
    Go项目实战:打造高并发日志采集系统(八)
    Go项目实战:打造高并发日志采集系统(七)
    海思3520v300NDI协议移植
    支持ssl的boa服务器
    多字节和宽字节互相转换
    C++实现websocket协议通讯
  • 原文地址:https://www.cnblogs.com/wyp1988/p/11313684.html
Copyright © 2011-2022 走看看