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 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
please share your code
– shaghayegh sheykholeslami
2 days ago