Установка цвета фона в области переполнения div - PullRequest
Новая
       10

Установка цвета фона в области переполнения div

0 голосов
/ 10 ноября 2018

Я использую учебник по начальной загрузке, чтобы создать простую адаптивную страницу для изучения HTML и CSS, но я борюсь с одной вещью.

У меня есть контейнер для жидкости, с 3 столбцами.Каждый столбец имеет ширину 4 столбца сетки.

У меня есть div в первом столбце с высотой 100%, фон черный, текст белый.Тело и дочерние элементы также имеют высоту 100%, чтобы столбцы заполняли страницу.

Это нормально, пока, скажем, на мобильном телефоне в альбомном режиме текст не будет длиннее размера экрана.

Div заполняет экран фоном, как и следовало ожидать - это 100% высоты экрана.Но когда вы прокручиваете область, которая переполнилась, фон становится белым, поэтому вы не можете видеть текст.Я хочу, чтобы область переполнения имела цвет фона из столбца.

You can see the columns end once you scroll down

Редактировать: Это мой 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>

1 Ответ

0 голосов
/ 10 ноября 2018

Во-первых, вам не нужно добавлять высоту: 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>

это отобразит 1 столбец на экранах xs и sm и отобразит 2 столбца, начиная с экрана md. Если вы хотите иметь 3 столбца, измените 6 на 4

...