Setting a background color in div overflow area
up vote
0
down vote
favorite
I'm using the bootstrap tutorial to build a simple responsive page to learn a bit of html and CSS but I'm struggling with one thing.
I have a fluid container, with 3 columns. Each column is actually 4 grid columns wide.
I have a div in the first column with a height of 100%, background is black, text is white. Body and children also have 100% height so that the columns fill the page.
This is fine until, say on a mobile in landscape mode, the text is longer than the screen size.
The div fills the screen with the background as I would expect it too - It's 100% of the height of the screen. But when you scroll into the area that has overflowed, the background is white so you can't see the text. What I want is for the overflow area to have the background colour from the column.
Edit: This is my 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
asked Nov 10 at 10:59
AndyJ
598
add a comment |
up vote
0
down vote
favorite
I'm using the bootstrap tutorial to build a simple responsive page to learn a bit of html and CSS but I'm struggling with one thing.
I have a fluid container, with 3 columns. Each column is actually 4 grid columns wide.
I have a div in the first column with a height of 100%, background is black, text is white. Body and children also have 100% height so that the columns fill the page.
This is fine until, say on a mobile in landscape mode, the text is longer than the screen size.
The div fills the screen with the background as I would expect it too - It's 100% of the height of the screen. But when you scroll into the area that has overflowed, the background is white so you can't see the text. What I want is for the overflow area to have the background colour from the column.
Edit: This is my 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
asked Nov 10 at 10:59
AndyJ
598
please share your code
– shaghayegh sheykholeslami
Nov 10 at 12:46
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm using the bootstrap tutorial to build a simple responsive page to learn a bit of html and CSS but I'm struggling with one thing.
I have a fluid container, with 3 columns. Each column is actually 4 grid columns wide.
I have a div in the first column with a height of 100%, background is black, text is white. Body and children also have 100% height so that the columns fill the page.
This is fine until, say on a mobile in landscape mode, the text is longer than the screen size.
The div fills the screen with the background as I would expect it too - It's 100% of the height of the screen. But when you scroll into the area that has overflowed, the background is white so you can't see the text. What I want is for the overflow area to have the background colour from the column.
Edit: This is my 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
asked Nov 10 at 10:59
AndyJ
598
I'm using the bootstrap tutorial to build a simple responsive page to learn a bit of html and CSS but I'm struggling with one thing.
I have a fluid container, with 3 columns. Each column is actually 4 grid columns wide.
I have a div in the first column with a height of 100%, background is black, text is white. Body and children also have 100% height so that the columns fill the page.
This is fine until, say on a mobile in landscape mode, the text is longer than the screen size.
The div fills the screen with the background as I would expect it too - It's 100% of the height of the screen. But when you scroll into the area that has overflowed, the background is white so you can't see the text. What I want is for the overflow area to have the background colour from the column.
Edit: This is my 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
css responsive
asked Nov 10 at 10:59
AndyJ
598
asked Nov 10 at 10:59
AndyJ
598
edited Nov 10 at 17:18
asked Nov 10 at 10:59
AndyJ
598
asked Nov 10 at 10:59
AndyJ
598
asked Nov 10 at 10:59
AndyJ
598
598
please share your code
– shaghayegh sheykholeslami
Nov 10 at 12:46
add a comment |
please share your code
– shaghayegh sheykholeslami
Nov 10 at 12:46
please share your code
– shaghayegh sheykholeslami
Nov 10 at 12:46
please share your code
– shaghayegh sheykholeslami
Nov 10 at 12:46
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
First, you don't need to add height : 100% to your divs
it will applied automatically.
Second, to achieve your layout, you may need this way
<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>this will display 1 column on xs and sm screens and displays 2 columns starting from md screen. If you want to have 3 columns, change 6 to 4
answered Nov 10 at 12:25
Ahmed Elbessfy
236
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
Nov 10 at 16:49
I've edited my post to include my html. I just removed the heights from everything and it then doesn't adjust the height to fill the page.
– AndyJ
Nov 10 at 17:17
you missed a part of your code, please complete it
– Ahmed Elbessfy
2 days ago
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
First, you don't need to add height : 100% to your divs
it will applied automatically.
Second, to achieve your layout, you may need this way
<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>this will display 1 column on xs and sm screens and displays 2 columns starting from md screen. If you want to have 3 columns, change 6 to 4
answered Nov 10 at 12:25
Ahmed Elbessfy
236
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
Nov 10 at 16:49
I've edited my post to include my html. I just removed the heights from everything and it then doesn't adjust the height to fill the page.
– AndyJ
Nov 10 at 17:17
you missed a part of your code, please complete it
– Ahmed Elbessfy
2 days ago
add a comment |
up vote
0
down vote
First, you don't need to add height : 100% to your divs
it will applied automatically.
Second, to achieve your layout, you may need this way
<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>this will display 1 column on xs and sm screens and displays 2 columns starting from md screen. If you want to have 3 columns, change 6 to 4
answered Nov 10 at 12:25
Ahmed Elbessfy
236
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
Nov 10 at 16:49
I've edited my post to include my html. I just removed the heights from everything and it then doesn't adjust the height to fill the page.
– AndyJ
Nov 10 at 17:17
you missed a part of your code, please complete it
– Ahmed Elbessfy
2 days ago
add a comment |
up vote
0
down vote
up vote
0
down vote
First, you don't need to add height : 100% to your divs
it will applied automatically.
Second, to achieve your layout, you may need this way
<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>this will display 1 column on xs and sm screens and displays 2 columns starting from md screen. If you want to have 3 columns, change 6 to 4
answered Nov 10 at 12:25
Ahmed Elbessfy
236
First, you don't need to add height : 100% to your divs
it will applied automatically.
Second, to achieve your layout, you may need this way
<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>this will display 1 column on xs and sm screens and displays 2 columns starting from md screen. If you want to have 3 columns, change 6 to 4
<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><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>answered Nov 10 at 12:25
Ahmed Elbessfy
236
answered Nov 10 at 12:25
Ahmed Elbessfy
236
answered Nov 10 at 12:25
Ahmed Elbessfy
236
answered Nov 10 at 12:25
Ahmed Elbessfy
236
236
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
Nov 10 at 16:49
I've edited my post to include my html. I just removed the heights from everything and it then doesn't adjust the height to fill the page.
– AndyJ
Nov 10 at 17:17
you missed a part of your code, please complete it
– Ahmed Elbessfy
2 days ago
add a comment |
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
Nov 10 at 16:49
I've edited my post to include my html. I just removed the heights from everything and it then doesn't adjust the height to fill the page.
– AndyJ
Nov 10 at 17:17
you missed a part of your code, please complete it
– Ahmed Elbessfy
2 days ago
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
Nov 10 at 16:49
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
Nov 10 at 16:49
I've edited my post to include my html. I just removed the heights from everything and it then doesn't adjust the height to fill the page.
– AndyJ
Nov 10 at 17:17
I've edited my post to include my html. I just removed the heights from everything and it then doesn't adjust the height to fill the page.
– AndyJ
Nov 10 at 17:17
you missed a part of your code, please complete it
– Ahmed Elbessfy
2 days ago
you missed a part of your code, please complete it
– Ahmed Elbessfy
2 days ago
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238259%2fsetting-a-background-color-in-div-overflow-area%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
please share your code
– shaghayegh sheykholeslami
Nov 10 at 12:46