正文背景颜色在子元素的末尾停止

Question

我正在试用uikit并使用他们的可排序列表。他们的网格系统以某种方式影响背景高度。

screenshot

我可以在这些列表下添加元素，并且背景向下延伸，但为什么此排序组会使背景以这种方式运行？如果我删除这些元素，背景将填满整个屏幕。

＆＃13;

＆＃13;

body {
  background-color: #787878;
}
#main {
  width: 75%;
  background-color: white;
  margin: 0 auto
}

＆＃13;

<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/sortable.almost-flat.min.css" />
<nav class="uk-navbar">
  <ul class="uk-navbar-nav">
    <li class="uk-active"><a href="">Home</a>
    </li>
    <li><a href="">About</a>
    </li>
    <li class="uk-parent"><a href="">Contact</a>
    </li>
  </ul>
</nav>

<br>
<br>

<div class="uk-container uk-container-center" data-uk-grid-match>
  <div class="uk-grid uk-grid-width-1-3">

    <div>

      <h3>First list</h3>

      <div class="uk-sortable uk-margin" data-uk-sortable="{group:'test'}">
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 1</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 2</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 3</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 4</div>
        </div>
      </div>

    </div>

    <div>

      <h3>Second list</h3>

      <div class="uk-sortable uk-margin" data-uk-sortable="{group:'test'}">
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 1</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 2</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 3</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 4</div>
        </div>
      </div>

    </div>

    <div>

      <h3>Third list</h3>

      <div class="uk-sortable uk-margin" data-uk-sortable="{group:'test'}">
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 1</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 2</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 3</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 4</div>
        </div>
      </div>

    </div>
  </div>
</div>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/core/modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/grid.min.js"></script>
<script src="js/custom.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以向min-height添加padding-bottom和body，以避免直接在内容结束时结束。

最后加载custom.css CSS也是明智的。

＆＃13;

＆＃13;

body {
  background-color: #787878;
  min-height: 100vh;/* fill up the screen*/
  padding-bottom:1em;/* make some space at the bottom, a bit of makeup */
  box-sizing:border-box;/* include the padding into min-height calculation */
}

#main {
  width: 75%;
  background-color: white;
  margin: 0 auto
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/sortable.almost-flat.min.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css"><!-- might be wise to load custom CSS last -->
<nav class="uk-navbar">
  <ul class="uk-navbar-nav">
    <li class="uk-active"><a href="">Home</a>
    </li>
    <li><a href="">About</a>
    </li>
    <li class="uk-parent"><a href="">Contact</a>
    </li>
  </ul>
</nav>

<br>
<br>

<div class="uk-container uk-container-center" data-uk-grid-match>
  <div class="uk-grid uk-grid-width-1-3">

    <div>

      <h3>First list</h3>

      <div class="uk-sortable uk-margin" data-uk-sortable="{group:'test'}">
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 1</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 2</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 3</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 4</div>
        </div>
      </div>

    </div>

    <div>

      <h3>Second list</h3>

      <div class="uk-sortable uk-margin" data-uk-sortable="{group:'test'}">
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 1</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 2</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 3</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 4</div>
        </div>
      </div>

    </div>

    <div>

      <h3>Third list</h3>

      <div class="uk-sortable uk-margin" data-uk-sortable="{group:'test'}">
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 1</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 2</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 3</div>
        </div>
        <div class="uk-margin">
          <div class="uk-panel uk-panel-box">Item 4</div>
        </div>
      </div>

    </div>
  </div>
</div>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/core/modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/grid.min.js"></script>
<script src="js/custom.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  试试这个，可能这会对你有帮助，你需要清除漂浮物

body {
background-color: #787878;
min-height: 100vh;
}
#main {
    width: 75%;
    background-color: white;
    margin: 0 auto
}

<!DOCTYPE html>
<html>
<head>
<title></title>

    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/components/sortable.almost-flat.min.css" />



</head>

<body>

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">
        <li class="uk-active"><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li class="uk-parent"><a href="">Contact</a></li>
    </ul>
</nav>

<br><br>

<div class="uk-container uk-container-center" data-uk-grid-match>
    <div class="uk-grid uk-grid-width-1-3">

        <div>

            <h3>First list</h3>

            <div class="uk-sortable uk-margin" data-uk-sortable="{group:'test'}">
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 1</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 2</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 3</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 4</div>
                </div>
            </div>
			<div style="clear:both;"></div>

        </div>

        <div>

            <h3>Second list</h3>

            <div class="uk-sortable uk-margin" data-uk-sortable="{group:'test'}">
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 1</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 2</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 3</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 4</div>
                </div>
            </div>

			<div style="clear:both;"></div>
        </div>

        <div>

            <h3>Third list</h3>

            <div class="uk-sortable uk-margin" data-uk-sortable="{group:'test'}">
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 1</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 2</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 3</div>
                </div>
                <div class="uk-margin">
                    <div class="uk-panel uk-panel-box">Item 4</div>
                </div>
            </div>

			<div style="clear:both;"></div>
        </div>
    </div>   
</div>  





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/core/modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/components/grid.min.js"></script>
<script src="js/custom.js"></script>
</body>

</html>