Question

在下面的代码中，我有两个div部分。

我想在右div内的表格到达其div后立即更改左右min-height的大小。

在最小化屏幕时，我得到一个滚动条，但我希望它减小左div的大小并增加右div的大小以显示没有滚动条的内容。

<html>
    <head>
        <meta charset="UTF-8">
        <title>StackOverflow Query</title>
        <style>
        .background{
            background-color: gray;
            width:100%;
            height:100%;
        }
        .left-div{
            width:70%;
            height:90%;
            background-color: white;
            float:left;
            border:1px solid black;
            margin-top: 3%;
            margin-left: 1%;
        }
        .right-div{
            overflow: auto;
            width:25%;
            background-color: white;
            float:left;
            border:1px solid black;
            margin-left: 2%;
            height:90%;
            margin-top: 3%;
        }
        table{
            width:90%;
            height:90%;
            border:1px solid black;
            margin-left: 5%;
            margin-top: 5%;
            overflow: auto;
            min-width: 400px;
        }
        </style>
    </head>
    <body>
        <div class="background">
            <!-- Left div inside webpage -->
            <div class="left-div">
                Left most Div with width 70%
            </div>

            <!-- Right div inside webpage -->
            <div class="right-div">

                Right most Div with width 25%
                <!-- Table inside right div of webpage -->
                <table>
                <tr>
                    <td>Column 1 inside table</td>
                    <td>Column 2 inside table</td>
                    <td>Column 3 inside table</td>
                    <td>Column 4 inside table</td>
                </tr>

                </table>

            </div>
        </div>
    </body>
    </html>

Answer 1

您可以使用下面的display:flex。

将min-width添加到.left-div，将width: 100%添加到.right-div

＆＃13;

<html>

<head>
  <meta charset="UTF-8">
  <title>StackOverflow Query</title>
  <style>
    .background {
      display: flex;
      background-color: gray;
      width: 100%;
      height: 100%;
    }
    .left-div {
      min-width: 20%;
      height: 90%;
      background-color: white;
      float: left;
      border: 1px solid black;
      margin-top: 3%;
      margin-left: 1%;
    }
    .right-div {
      overflow: auto;
      width: 100%;
      background-color: white;
      float: left;
      border: 1px solid black;
      margin-left: 2%;
      height: 90%;
      margin-top: 3%;
    }
    table {
      width: 90%;
      height: 90%;
      border: 1px solid black;
      margin-left: 5%;
      margin-top: 5%;
      overflow: auto;
      min-width: 400px;
    }
  </style>
</head>

<body>
  <div class="background">
    <!-- Left div inside webpage -->
    <div class="left-div">
      Left most Div with width 70%
    </div>

    <!-- Right div inside webpage -->
    <div class="right-div">

      Right most Div with width 25%
      <!-- Table inside right div of webpage -->
      <table>
        <tr>
          <td>Column 1 inside table</td>
          <td>Column 2 inside table</td>
          <td>Column 3 inside table</td>
          <td>Column 4 inside table</td>
        </tr>

      </table>

    </div>
  </div>
</body>

</html>

＆＃13;

Answer 2

您正在搜索@media规则。看看这个： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

有了这个，你可以说如果屏幕宽度不同，哪些div应该改变。

如何使div部分的宽度动态化？

2 个答案: