设置div溢出区域的背景颜色答案

【问题标题】：Setting a background color in div overflow area设置div溢出区域的背景颜色
【发布时间】：2018-11-11 01:18:54
【问题描述】：

我正在使用引导教程来构建一个简单的响应式页面来学习一些 html 和 CSS，但我正在努力解决一件事。

我有一个流体容器，有 3 列。每列实际上是 4 个网格列宽。

我在第一列有一个高度为 100% 的 div，背景为黑色，文本为白色。正文和子项也有 100% 的高度，以便列填满页面。

这很好，直到在横向模式下的移动设备上，文本比屏幕尺寸长。

正如我所期望的那样，div 用背景填充屏幕 - 它是屏幕高度的 100%。但是当你滚动到溢出的区域时，背景是白色的，所以你看不到文字。我想要的是溢出区域具有列的背景颜色。

编辑：这是我的 html：

<html lang="en" style="height: 100%">
<head>
  <title>Dashboard V2</title>
  <meta http-equiv="refresh" content="300">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}" />
  <script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body style="height: 100%;" onload="startTime()">

<div class="container-fluid" style="height: 100%;">
  <div class="row" style="height: 100%;">
    <div class="col-sm-4 col1" style="height: 100%;">
        <div class="time">
            <div id="txt"></div>
        </div>

【问题讨论】：

请分享您的代码

标签： css responsive

【解决方案1】：

首先，您不需要在 div 中添加 height : 100% 它将自动应用。

其次，要实现你的布局，你可能需要这种方式

<div>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        this ful height div
      </div>
      <div class="col-md-6">
        <div>blabla</div>
        <div>down</div>
        <div>boost</div>
        <div>auto</div>
      </div>
    </div>
  </div>
</div>

这将在 xs 和 sm 屏幕上显示 1 列，并从 md 屏幕开始显示 2 列。如果你想有 3 列，把 6 改成 4

【讨论】：

好的，我从 Row 和 Col 类中删除了高度规则，效果很好
我已经编辑了我的帖子以包含我的 html。我只是从所有内容中删除了高度，然后它不会调整高度以填充页面。