Setting a background color in div overflow area
Multi tool use
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 2 days ago
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 2 days ago
AndyJ
598
please share your code
– shaghayegh sheykholeslami
2 days ago
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 2 days ago
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 2 days ago
AndyJ
598
asked 2 days ago
AndyJ
598
edited 2 days ago
asked 2 days ago
AndyJ
598
asked 2 days ago
AndyJ
598
asked 2 days ago
AndyJ
598
598
please share your code
– shaghayegh sheykholeslami
2 days ago
add a comment |
please share your code
– shaghayegh sheykholeslami
2 days ago
please share your code
– shaghayegh sheykholeslami
2 days ago
please share your code
– shaghayegh sheykholeslami
2 days ago
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 2 days ago
Ahmed Elbessfy
236
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
2 days ago
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
2 days ago
you missed a part of your code, please complete it
– Ahmed Elbessfy
yesterday
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 2 days ago
Ahmed Elbessfy
236
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
2 days ago
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
2 days ago
you missed a part of your code, please complete it
– Ahmed Elbessfy
yesterday
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 2 days ago
Ahmed Elbessfy
236
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
2 days ago
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
2 days ago
you missed a part of your code, please complete it
– Ahmed Elbessfy
yesterday
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 2 days ago
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 2 days ago
Ahmed Elbessfy
236
answered 2 days ago
Ahmed Elbessfy
236
answered 2 days ago
Ahmed Elbessfy
236
answered 2 days ago
Ahmed Elbessfy
236
236
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
2 days ago
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
2 days ago
you missed a part of your code, please complete it
– Ahmed Elbessfy
yesterday
add a comment |
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
2 days ago
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
2 days ago
you missed a part of your code, please complete it
– Ahmed Elbessfy
yesterday
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
2 days ago
ok I removed the height rules from the Row and Col classes and it worked well
– Ahmed Elbessfy
2 days ago
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
2 days ago
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
2 days ago
you missed a part of your code, please complete it
– Ahmed Elbessfy
yesterday
you missed a part of your code, please complete it
– Ahmed Elbessfy
yesterday
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
Post as a guest
Zq4 AoEX21,CmJNC9NyvB15f 18OqR2uTh0rI,dMUQAVAKdmbBk
please share your code
– shaghayegh sheykholeslami
2 days ago