时间戳

首页 > 解决方案 > 在 div 溢出区域设置背景颜色

css - 在 div 溢出区域设置背景颜色

问题描述

我正在使用引导教程来构建一个简单的响应式页面来学习一些 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>

标签： cssresponsive

解决方案

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

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

<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

推荐阅读