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;
}
Related
I have a container flexbox element filling the remaining space inside a container. Inside that, I want an element that can fill the parent and scroll on overflow. Problem is, is always just overflows the container, and I can't set height: 100%, since that won't take into account a header with a dynamic height.
Please see this code snippet for a clearer example. I want to scroll on the purple div, but the red div keeps overflowing the blue div, which it shouldn't. I would highly prefer to not change the HTML, only the CSS.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
padding: 10px;
box-sizing: border-box;
background: blue;
width: 300px;
display: flex;
flex-direction: column;
}
.header {
padding: 10px;
background: green;
}
.content {
padding: 10px;
background: red;
flex: 1;
box-sizing: border-box;
}
.boxes {
padding: 10px;
background: purple;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}
.box {
height: 200px;
border: 1px solid black;
box-sizing: border-box;
background: orange;
}
<div class="wrapper">
<div class="header">
This is the header.
It has multiple lines.
</div>
<div class="content">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Not sure if this is what you are looking for. I have just added overflow: scroll to content class and it seems to work.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
padding: 10px;
box-sizing: border-box;
background: blue;
width: 300px;
display: flex;
flex-direction: column;
}
.header {
padding: 10px;
background: green;
}
.content {
padding: 10px;
background: red;
flex: 1;
box-sizing: border-box;
overflow-y: scroll;
}
.boxes {
padding: 10px;
background: purple;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}
.box {
height: 200px;
border: 1px solid black;
box-sizing: border-box;
background: orange;
}
<div class="wrapper">
<div class="header">
This is the header. It has multiple lines.
</div>
<div class="content">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Using overflow-y: hidden; on the .content hides everything that would overflow it's parent container
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
padding: 10px;
box-sizing: border-box;
background: blue;
width: 300px;
display: flex;
flex-direction: column;
}
.header {
padding: 10px;
background: green;
}
.content {
padding: 10px;
background: red;
flex: 1;
box-sizing: border-box;
overflow: hidden;
}
.boxes {
padding: 10px;
background: purple;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}
.box {
height: 200px;
border: 1px solid black;
box-sizing: border-box;
background: orange;
}
<div class="wrapper">
<div class="header">
This is the header.
It has multiple lines.
</div>
<div class="content">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Here, if you check, I have given max-height: calc(100% - 38px); to the .content to have a max-height. Giving flex: 1 will provide it a min-height only, it will grow more if the there is content and there is space in its wrapper. So by providing a max-height, we can avoid this issue
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
padding: 10px;
background: blue;
width: 300px;
display: flex;
flex-direction: column;
}
.header {
padding: 10px;
background: green;
}
.content {
padding: 10px;
background: red;
flex: 1;
max-height: calc(100% - 38px);
}
.boxes {
padding: 10px;
background: purple;
overflow-y: auto;
max-height: 100%;
}
.box {
height: 200px;
border: 1px solid black;
background: orange;
}
<div class="wrapper">
<div class="header">
This is the header.
It has multiple lines.
</div>
<div class="content">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I wanted to have 3 divs side by side in a HTML document and I managed to achieve it where it looks something like this:
But whenever I tried adding objects such as text or any other objects, the div is always shifting down:
Could anyone help me out on this?
Edit
Thanks for the response but i forgot that i wanted a logo at the top left, then followed by the 3 divs below the logo, but adding "flex" property to the container leads to this:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
display: flex;
border: 1px solid black;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
<!--
this is the outermost shell
-->
<div class="container">
<!-- to add a logo at the top left -->
<div class = "sun_lg">
<img src = "images/sun.png" height = "50">
</div>
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>
Just add display:flex to your container.
To learn more about flexbox read the documentation.
You can also use grid
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
border: 1px solid black;
display: flex;
flex-direction:column;
/* new */
}
.wrapper{
width: 100%;
height:auto;
display: flex;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
/* update for logo */
.sun_lg {
border: 1px solid #000;
flex: 1 1 100%;
}
<div class="container">
<!-- to add a logo at the top left -->
<div class="sun_lg">
<img src="https://via.placeholder.com/50x50" height="50">
</div>
<div class="wrapper">
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>
</div>
Define vertical-align to set the exact behavior of divs against texts baseline. I will use vertical-align:top in all child divs:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
border: 1px solid black;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
vertical-align:top;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
vertical-align:top;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
vertical-align:top;
}
<!--
this is the outermost shell
-->
<div class="container">
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>
I want to center horizontally a div but it works in Google Chrome but in IE not work.
This is my code:
.app-content {
width: 100%;
height: calc(100%);
position: relative;
}
.pagination--custom {
width: fit-content;
margin: 0 auto;
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
height: 50px;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
fit-content is experimental and won't work in ie or edge: https://developer.mozilla.org/en-US/docs/Web/CSS/width.
Make it display: inline-block instead and put text-align: center on the parent
.app-content {
width: 100%;
height: calc(100%);
position: relative;
text-align:center;
}
.pagination--custom {
display:inline-block;
margin: 0 auto;
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
width: 50px;
height: 50px;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
Try This: Tested its working!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.pagination--custom {
width: 50px;
height: 50px;
border: 1px solid #000;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
</body>
</html>
JUST SET margin: 0 auto; for pagination
Your margin: 0 auto; has to be on .pagination and remove width: fit-content;.
.app-content {
width: 100%;
height: calc(100%);
position: relative;
}
.pagination--custom {
border: 1px solid blue;
}
.pagination {
border: 1px solid black;
width: 50px;
height: 50px;
margin: 0 auto;
}
<div class="app-content">
<div class="pagination--custom">
<div class="pagination">
</div>
</div>
</div>
I have this simple html and css
body{
background-color: black;
padding:0;
margin: 0;
box-sizing: border-box;
}
#ctr{
height: 500px;
width: 200px;
margin: 0 auto;
background-color: red;
}
#ctr > .box{
background-color: white;
height: 200px;
width: 200px;
border: 1px solid black;
margin-top:10px;
}
<div id = "ctr">
<div class = "box">
<div class="something1"></div>
<div class="something2"></div>
</div>
</div>
I'm trying to add margin-top to the white box (box class) inside the red div(ctr id), but the whole red div is getting the margin and not just the white div.
here's a jsfiddle of the example.
https://jsfiddle.net/6tvrwxhg/
Add overflow:auto (or hidden) to the parent (#ctr)
body {
background-color: black;
padding:0;
margin: 0;
box-sizing: border-box;
}
#ctr {
height: 500px;
width: 200px;
margin: 0 auto;
background-color: red;
overflow: auto;
}
#ctr > .box{
background-color: white;
height: 200px;
width: 200px;
border: 1px solid black;
margin-top:10px;
}
<div id="ctr">
<div class="box">
<div class="something1"></div>
<div class="something2"></div>
</div>
</div>
more info in a good answer
https://www.w3.org/TR/CSS2/box.html#collapsing-margins
That is Parent/First child margin collapsing, and that happens if there is no border, padding, inline content or clearance to separate parent and child. So you can add border-top on parent
body {
background-color: black;
padding: 0;
margin: 0;
box-sizing: border-box;
}
#ctr {
height: 500px;
width: 200px;
margin: 0 auto;
background-color: red;
border-top: 1px solid transparent;
}
#ctr > .box {
background-color: white;
height: 200px;
width: 200px;
border: 1px solid black;
margin-top: 10px;
}
<div id="ctr">
<div class="box">
<div class="something1"></div>
<div class="something2"></div>
</div>
</div>
Or you can add padding to parent element or use overflow: hidden
body {
background-color: black;
padding: 0;
margin: 0;
box-sizing: border-box;
}
#ctr {
height: 500px;
width: 200px;
margin: 0 auto;
background-color: red;
overflow: hidden
}
#ctr > .box {
background-color: white;
height: 200px;
width: 200px;
padding-top: 1px;
margin-top: 10px;
}
<div id="ctr">
<div class="box">
<div class="something1"></div>
<div class="something2"></div>
</div>
</div>
You can read more about this at Mastering margin collapsing
Please see this Fiddle:
https://jsfiddle.net/vdb9y2m0/
HTML:
<div class="header">
<div class="container">
Testcontent in centered container
</div>
</div>
<div class="body">
<div class="sidebar">
Content (text) should start at header container
</div>
<div class="content">
Rest of the content, should end at header container
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.header {
width: 100%;
height: 200px;
background: orange;
}
.container {
width: 600px;
margin: 0px auto;
border-left: 1px solid red;
height: 200px;
border-right: 1px solid red;
}
.sidebar {
width: 30%;
background: #FFF;
float: left;
padding: 20px 20px;
}
.content {
width: 70%;
background: darkblue;
color: #FFF;
padding: 20px 20px;
display: inline-block;
}
I would like to start the content of the left div in the body at the start of the container in the header - and end the div of the main content (darkblue) at the end of the container.
Like so:
If this possible, without using some ugly Javascript hack? Thanks in advance!