Question

我正在使用引导程序教程来构建一个简单的响应页面，以学习一些html和CSS，但是我正为一件事情而苦苦挣扎。

我有一个装有3列液体的容器。每列实际上是4个网格列宽。

我在第一列中有一个div，高度为100％，背景为黑色，文本为白色。身体和孩子的身高也都为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>

Answer 1

首先，您无需将height设置为100％它将自动应用。

第二，要实现布局，您可能需要这种方式

#include <stdio.h>
#include <time.h>
#include <unistd.h>
int main()
{
    int a = 1;
    while( a <= 5 )
    {

    time_t t = time(NULL);
    struct tm tm = *localtime(&t);
    printf("Normal prinf funcation call from C\n");
    fprintf(stdout, "STDOUT, Got on STDOUT from C. - now: %d-%d-%d %d:%d:%d\n", tm.tm_year + 1900, tm.tm_mon + 1, tm.tm_mday, tm.tm_hour, tm.tm_min, tm.tm_sec);
    fprintf(stderr, "STDERR, Got in STDERR from C. - now: %d-%d-%d %d:%d:%d\n", tm.tm_year + 1900, tm.tm_mon + 1, tm.tm_mday, tm.tm_hour, tm.tm_min, tm.tm_sec);
    sleep(1);
    a ++;
    }
    return 0;
}

这将在xs和sm屏幕上显示1列，并从md屏幕开始显示2列。如果要有3列，请将6更改为4

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

1 个答案: