I have a bootstrap container-fluid wrapped up in a div, and now i want the container-fluid to have height of 100% regardless of it's content but it seems it only take up the height of it content below is my code
Html
<div class="wrap">
<div class="container-fluid h-100 test">this is container-fluid
<div>hello my brother</div>
</div>
</div>
My css
html,
body {
height: 100%;
}
.wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
background: blue;
}
.test {
height: 100%;
background-color: yellow;
border: 1px solid red;
text-align:center;
}
.footer {
height: 60px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
padding-top: 20px;
}
now i want the yellow div to take up 100% height but it doesn't work as expected.. here is my fiddle
You are giving wrap a height:auto just remove that height:auto means that it will maintain it's own height to it childrens, If their are more childs then it will increase it's own height.Just remove that and add height:100%
html,
body {
height: 100%;
}
.wrap {
height: 100%;
margin: 0 auto -60px;
padding: 0 0 60px;
background: blue;
}
.test {
height: 100%;
background-color: yellow;
border: 1px solid red;
text-align:center;
}
.footer {
height: 60px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
padding-top: 20px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="wrap">
<div class="container-fluid h-100 test">this is container-fluid
<div>hello my brother</div>
</div>
</div>
</body>
<footer class="footer">
<div class="container">
<p class="pull-left">my site</p>
<p class="pull-right">2019</p>
</div>
</footer>
</html>
Related
I have a webpage with following structure:
div: (app)
div: (navbar)
div: (wrapper) {position: relative}
div: (intro)
div: (content) {position: absolute}
div: (footer)
where div-content is dynamic that means it should extend if the data inside this div extends from its minimum height.
I am trying to add the footer at the end of the content but since content has absolute position, footer is being placed at the end of Intro.
I am beginner at front-end designing so pardon me if I am missing something basic. Please refer me some reading articles as well related to concepts about positioning divs.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
position: relative;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
/* align-items: center;
justify-content: center;
display: flex;*/
}
.content {
position: absolute;
top: 250px;
width: 94%;
right: 3%;
left: 3%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 960px;
margin: auto;
min-height: 800px;
background-color: gray;
}
.footer {
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
NOTE: .content is overlapped with .intro intentionally. and that is why i am using position absolute for .content
Remove position: absolute; from .content. This will fix the overlapping with the footer. The width will need to be adjusted accordingly (make width: 100%).
Updated: .contentto span width
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
}
.content {
margin: -250px auto auto;
width: 94%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 906px;
min-height: 800px;
background-color: gray;
}
.footer {
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
delete your content min-height. is that what you need?
I'm trying to align two div's vertically, I know how to do this. But another issue is coming up, the div above ("top-bar") is being cut in half when I place the second div below it and I have no reason why. Should I use position:absolute to solve this? I try to avoid using this however whenever I can. Thanks!
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.top-bar {
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.bottom-bar {
margin-top: 20%;
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
/*border-top: 0.5px solid lightgrey;*/
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="homepage-window">
<div class="nav-bar">
</div>
<div class="top-bar">
</div>
<div class="bottom-bar">
</div>
</div>
</body>
</html>
Wrap your top-bar and bottom-bar div in another wrapper div with width :100%;
<div style="width: 100%;">
<div class="top-bar">
</div>
<div class="bottom-bar">
</div>
</div>
In your case all 3 divs are placed in a flex container, its aligning them in the same row. Thats why You need to keep the top-bar and bottom-bar div in another div container.
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.top-bar {
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.bottom-bar {
margin-top: 20%;
height: 8%;
width: 100%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="homepage-window">
<div class="nav-bar">
</div>
<div style="width: 100%;">
<div class="top-bar">
</div>
<div class="bottom-bar">
</div>
</div>
</div>
</body>
</html>
I am designing a dashboard interface for myself. I am having some problems with inner divs, my leftpane div is set to 100% height inside the parent but it is overflowing parent div by the amount of 50px which is the height of topbar. Please suggest me why it is overflowing, 100% should mean whatever available space there is, isn't it?
here is my css and html
html, body {
height:100%;
margin: 0px;
}
.wrapper {
width: 100%;
height: 700px;
margin: auto;
border: 1px solid black;
display: table;
}
.topbar {
height: 50px;
background: #353535;
background-color: #353535;
clear:both;
color: white;
width: 100%;
position:relative;
}
.leftpane {
width: 20%;
height: 100%;
background-color: #eee;
float: left;
border-right: 2px solid #353535;
}
.content {
width: 79%;
height: 100%;
float:right;
border: 2px solid red;
}
.content-header {
height: 50px;
background-color: #353535;
width: 100%;
}
.content-area {
height:100%;
width: 100%;
border: 2px solid green;
}
<html>
<head>
<title>GUYACOM - Suivi de la connectivité</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style2.css" />
<!-- <link rel="stylesheet" href="css/bootstrap.css" /> -->
<!--<link rel="stylesheet" href="css/colorbox.css" /> -->
<!-- <script type="text/javascript" src="js/tinybox.js"></script> -->
</head>
<body>
<div class="wrapper">
<div class="topbar"><h1>
</h1></div>
<div class="content-area">
<div class="leftpane">
</div>
<div class="content">
<div class="content-header">
</div>
</div>
</div>
</div>
</body>
</html>
Try this it may help you...
<html>
<head>
<title>GUYACOM - Suivi de la connectivité</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style2.css" />
<style>
html, body {
height:100%;
margin: 0px;
}
.wrapper {
width: 100%;
height: 100%;
margin: auto;
border: 1px solid black;
display: table;
}
.topbar {
height: 50px;
background: #353535;
background-color: #353535;
clear:both;
color: white;
width: 100%;
position:absolute;
}
.leftpane {
width: 20%;
height: 100%;
background-color: #eee;
float: left;
border-right: 2px solid #353535;
}
.content {
width: 79.5%;
height: 100%;
float: left;
border: 2px solid red;
}
.content-header {
height: 50px;
background-color: #353535;
width: 100%;
}
.content-area {
height:100%;
width: 100%;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="topbar"><h1>
</h1></div>
<div class="content-area">
<div class="leftpane">
</div>
<div class="content">
<div class="content-header">
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to create a site with a frame that fills all the vertical space, e.g. becomes smaller and overflowing content becomes scrollable.
html and body height are set to 100vh and all of the boxes parents are set to 100%. I have not found another method and this results in every single parent being 100vh and ultimately the site overflowing.
What am I doing wrong?
I feel like a am just missing the right "position: " attributes...
<!DOCTYPE html>
<html>
<head>
<title>Pastebook</title>
<style type="text/css">
html,
body {
height: 100vh;
}
/*central panel*/
.central {
position: absolute;
width: 100%;
margin: 0 auto;
height: 100%;
border: 3px solid blue;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 970px;
height: 100%;
border: 3px solid yellow;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
height: 100%;
border: 3px solid lightgreen;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 5px solid gray;
font-size: 100%;
overflow: auto;
padding: 5px;
height: 100%
}
/*Example content*/
.content {
height: 100px;
background: lightgray;
margin: 5px;
}
</style>
</head>
<body>
<div class="central">
<div class="content">
central
</div>
<div class="middle">
<div class="content">
middle
</div>
<div class="contentPanel">
<div class="content">
content
</div>
<div class="clipboard">
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried some changing and this works
html,
body {
height: 100vh;
padding:0;
margin:0;
overflow:hidden;
}
/*central panel*/
.central {
position: absolute;
width: 100%;
margin: 0 auto;
height: 100vh;
border: 3px solid blue;
box-sizing: border-box;
overflow:scroll;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 970px;
border: 3px solid yellow;
box-sizing: border-box;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
border: 3px solid lightgreen;
box-sizing: border-box;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 3px solid gray;
box-sizing: border-box;
font-size: 100%;
overflow: scroll;
padding: 5px;
}
/*Example content*/
.content {
background: lightgray;
margin: 5px;
}
tell me if something doesn't work or if I did something wrong :)
edit: okay so I looked into it a bit further and you can
use flex boxes (which I do not like for no reason)
javascript(which is an even worse solution but also works)
css calc() function(I included this one at the bottom)
this will work better with a css addon that lets u use heights of
other elements inside the calc() function
html,
body {
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
/*central panel*/
.central {
width: 100%;
margin: 0 auto;
height: 100vh;
border: 3px solid blue;
box-sizing: border-box;
overflow: hidden;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 300px;
border: 3px solid yellow;
box-sizing: border-box;
height: calc(100vh - 55px);
overflow: hidden;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
border: 3px solid lightgreen;
box-sizing: border-box;
height: calc(100vh - 110px);
overflow: hidden;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 3px solid gray;
box-sizing: border-box;
overflow: scroll;
padding: 5px;
height: calc(100vh - 165px);
}
/*Example content*/
.content {
background: lightgray;
margin: 5px;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Pastebook</title>
</head>
<body>
<div class="central">
<div class="content">
central
</div>
<div class="middle">
<div class="content">
middle
</div>
<div class="contentPanel">
<div class="content">
content
</div>
<div class="clipboard">
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try
.central
{
overflow-y: auto;
}
I have a problem with 5 floating divs, here is a picture:
You will see.. the green div should be on the left side from the red div(instead of the empty place) and the violet div on the place from the green div.
The html order from the divs is: blue, red, orange, green and violet, I think this is the reason for this white, empty space, because the green and the violet div comes in the html after! the red div, is this right?
What can i do, to fix this problem, anyone have an idea? I set the margin-top of the violet to -300px but I think this not a clean solution and than would be the order(html structure) false.
Here is my full html:
<!DOCTYPE html>
<html>
<head>
<title>ResponsiveExample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="js/libs/jquery/jquery.js"></script>
</head>
<body>
<div class="page-wrapper">
<header>
<div class="header">
</div>
<div class="below-header"></div>
</header>
<div class="main-content">
<div class="blue-box"></div>
<div class="red-box"></div>
<div class="orange-box"></div>
<div class="green-box"></div>
<div class="violet-box"></div>
</div>
<footer>
</footer>
</div>
</body>
</html>
And here is my CSS:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body
{
margin: 0;
padding: 0;
}
.header{
position: fixed;
height: 50px;
width: 100%;
background-color: grey;
}
.below-header{
height: 50px;
width: 100%;
}
.blue-box{
height: 300px;
background-color: blue;
}
.red-box{
height: 600px;
background-color: red;
}
.orange-box{
height: 300px;
background-color: orange;
}
.green-box{
height: 300px;
background-color: greenyellow;
}
.violet-box{
height: 300px;
background-color: violet;
}
#media only screen and (min-width: 28.125em) {
.blue-box{
float: left;
width: 50%;
}
.red-box
{
float: left;
width: 100%;
}
.orange-box{
float: left;
width: 50%;
}
.green-box{
float: left;
width: 50%;
}
#media only screen and (min-width: 71.875em){
.blue-box{
width: 33%;
border: 5px solid black;
}
.red-box{
width: 33%;
border: 5px solid black;
}
.orange-box{
width: 33%;
border: 5px solid black;
clear: right;
}
.green-box{
width: 33%;
border: 5px solid black;
clear: right;
}
.violet-box{
width: 33%;
//margin-top: -300px;
border: 5px solid black;
float: left;
}
}
}
I would be very grateful for every help that I get!
Try this:
<div class="main-content">
<div id="left">
<div class="blue-box"></div>
<div class="green-box"></div>
</div>
<div id="center">
<div class="red-box"></div>
</div>
<div id="right">
<div class="orange-box"></div>
<div class="purple-box"></div>
</div>
</div>
Then apply CSS styles to your liking.