关于javascript：使div扩展以占用所有可用空间


Make div expand to take all the available space

本问题已经有最佳答案，请猛点这里访问。

我想要一个桌面式的全页面布局。顶部的一些菜单(Uknown高度，取决于内容)和下面的DIV，它占用了视区中的所有可用空间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
div {
  padding: 0px
}

html,
body {
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.outer {
  background: olive;
  height: 100%;
}

.menu {
  background: orange;
}

.should_fill_available_space {
  background: brown;
}
1
2
3
4
    Lorem Ipsum Lorem Ipsum Lorem Ipsum
 
 
    Brown color should go all the way down

我有本案的密码笔：https://codepen.io/marek-zganiacz/pen/nveaxr

我想让should_fill_available_space一直往下走，就像在menu会有height:10%和should_fill_available_space有‘高度：90%’

最简单的方法是使用flexbox。

  • 您将display: flex分配给父容器。在您的情况下，这是外部.outer。
  • flexbox在一个方向上工作。所以你可以把它们看得像列(垂直)或行(水平)。默认设置是将子元素分散到一行上。但我们要创建一个列。因此，我们必须将.outer上的flex-direction改为flex-direction: column。
  • 现在，我们需要指定如何让flexbox分割.outer中可用的空间量。正常行为是，flexbox为其子对象提供正常的宽度/高度。但是通过将flex:1分配给.should_fill_available_space，这个元素将获得所有额外的可用空间。flexbox的基本意思是，我们希望计算机使用所有1/1=100%(使用的flex值除以所有儿童的flex值)的可用空间应用于.should_fill_available_space，同时保留.menu宽度的最小空间。从技术上讲，flex:是一些其他属性的简写，但这对这个问题并不重要。

    • 这是您的JS小提琴：https://js fiddle.net/cryh53l7/

    HTML

    1
    2
    3
    4
    5
    6
        Lorem Ipsum
        Lorem Ipsum
        Lorem Ipsum
     
     
        Brown color should go all the way down

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
     div{
          padding: 0px
        }
        html, body{
          height: 100%;
          padding: 0px;
          margin: 0px;
        }
        .outer {
          display: flex;
          flex-direction: column;
          background: olive;
          height: 100%;
        }
        .menu{
          background: orange;

        }
        .should_fill_available_space{
          flex: 1;
          background: brown;

        }

    这就是Web文档标准的世界满足基于视区的桌面应用程序仿真的地方。您需要绝对定位容器。在这些容器中，您将能够设置相对位置元素或使用将使用HTML流的元素。

    外面有许多API，它们将在封面下做同样的事情，并且它们在连接到DOM之后，将始终依赖于JavaScript计算来根据元素的尺寸放置元素。

    下面是一个基于代码的简单示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    div{
      padding: 0px
    }
    html, body{
      height: 100%;
      padding: 0px;
      margin: 0px;
    }
    .outer {
      background: olive;
      height: 100%;
      width:100%
      position:absolute;
    }
    .menu{
      background: orange;
    }
    .should_fill_available_space{
      background: brown;
      position:absolute;
      bottom:0px;
      width:100vw;
    }


     
        Lorem Ipsum
        Lorem Ipsum
        Lorem Ipsum
     
     
        Brown color should go all the way down

    正如我提到的，您可以使用JavaScript来检索菜单的维度，并将其应用到您的布局中。

    1
    2
    3
    4
    5
    6
    window.addEventListener("load", function load(event){
        var menu = document.getElementById("menu");
      var main = document.getElementById("this");
      var menuHeight = menu.offsetHeight;
      main.style.top = menuHeight +"px";
    },false);

    这是密码笔。

    您可以使用css3中的flexbox实现这一点(https://css tricks.com/snippets/css/a-guide-to-flexbox/)。

    像这样更新你的CSS，让它工作：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .outer {
        background: olive;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .should_fill_available_space{
      background: brown;
      flex-grow: 2;
    }

    试试这个！

    我用了一个桌子显示器，希望对你没问题：)

    HTML：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
       Lorem Ipsum
       Lorem Ipsum
       Lorem IpsumLorem Ipsum
       Lorem Ipsum
       Lorem IpsumLorem Ipsum
       Lorem Ipsum
       Lorem IpsumLorem Ipsum
       Lorem Ipsum
       Lorem IpsumLorem Ipsum
       Lorem Ipsum
       Lorem IpsumLorem Ipsum
       Lorem Ipsum
       Lorem IpsumLorem Ipsum
     
     
       Brown color should go all the way down

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    div{
     padding: 0px
    }
    html, body{
      height: 100%;
      padding: 0px;
      margin: 0px;
    }
    .outer {
     background: olive;
     height: 100%;
     display:table;
     width:100%;
    }
    .menu{
     background: orange;
     display:table-row;

    }
    .should_fill_available_space{
     background: brown;
     display:table-row;
    }

    div+ div{
     height:100%;
    }

    您可以直接指定height属性。

    所以第一个div元素将有height of 10%，第二个元素将有height of 90%。