子要素の末尾にボディの背景色が停止する

私はuikitを試していて、ソート可能なリストを扱っています。背景の高さは、グリッドシステムによって何らかの影響を受けています。子要素の末尾にボディの背景色が停止する

私はこれらのリストの下に要素を追加することができ、かつ背景がダウン伸びるが、なぜこの種のグループは、このようにバックグラウンド動作させることができませんか？これらの要素を削除すると、背景が画面全体に塗りつぶされます。

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

<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>

出典

2016-12-15 Carlton Brumbelow

あなたは、コンテンツの端にストレートエンディング避けるためにbodyにmin-heightとpadding-bottomを追加することができます。

custom.css CSSを最後にロードすることもできます。

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 
 
}

<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>

出典

2016-12-15 13:45:00

をクリアする必要があり、これを試してみてください！なぜそれがこのように行動していたのか？他のプロジェクトでは、背景色は常に画面を塗りつぶし、その上にある要素の影響を受けることはありません。 –

@CarltonBrumbelowもしそれがしたら、あなたはこの答えを受け入れて、誰にも解決され、誰かに役立ちます。 **あなたはすでに、HTMLの背景を定義しています '/ *！ UIkit 2.27.2 | http://www.getuikit.com | （c）2014 YOOtheme | MITライセンス*/ html {font：400 14px/20px "Helvetica Neue"、Helvetica、Arial、sans-serif; -webkit-text-size-adjust：100％; - ms-text-size-adjust：100％;背景：#fff;色：＃444} 'ここでは＃fff ** –

が完了したことを定義しています。 –

これはあなたを助けるかもしれ、あなたが感謝、それをやったが山車

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> 
 
\t \t \t <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> 
 

 
\t \t \t <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> 
 

 
\t \t \t <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>

出典

2016-12-15 13:49:05

子要素の末尾にボディの背景色が停止する

答えて

関連する問題