When item's (#box) height is bigger than screen, parent container's (#wrap) bottom padding gets cut off.
Normal view, #wrap's bottom and top padding applied:
html, body {
height: 100%;
}
#wrap {
width: 100%;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
height: 100%;
}
#box {
padding: 20px;
background: red;
margin: auto;
}
<div id="wrap">
<div id="box">
CONTENT
<br>
CONTENT
<br>
CONTENT
<br>CONTENT
<br>
CONTENT
<br>
CONTENT
<br>
CONTENT
<br>
</div>
</div>
You can use this code
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrap {
width: 100%;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
height: 100%;
}
#box {
padding: 20px;
background: red;
margin: 20px auto;
}
<div id="wrap">
<div id="box">
CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br> CONTENT
<br>
</div>
</div>
Related
I'm having problem with my div with contenteditable=true which break my whole page.
When you type a lot of text, instead adding scrollbar it make div bigger so it move others parts of the page...
So what I would like my editable div fill remaining width and height of the page but add scrollbar when text being too big whitout moving others elments of the page. Thanks
JsFiddle
HTML
<body>
<h1>TEXT</h1>
<div class="all">
<div class="container">
<div class="lines"></div>
<div class="editor" contenteditable="true" spellcheck="false"></div>
</div>
<div class="manage">
<h1>TEXT</h1>
</div>
</div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
display: flex;
height: 100%;
width: 100%
}
h1 {
margin: 20px;
}
.all {
display:flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container {
display: flex;
width: 100%;
height: 400px;
overflow: auto;
}
.lines {
background-color: red;
border-radius: 20px 0 0 20px;
height: 100%;
width:40px;
}
.editor {
border-radius: 0 20px 20px 0;
background-color: orange;
width: 100%;
height: 100%;
}
All you need to do is to add a max-width property to your .editor class.
Here is a working code: https://codesandbox.io/s/html-code-editor-forked-g27d9o?file=/index.html
How do I stop this top banner from overlapping the main content when the browser window is made smaller. Currently I have the main content set 110px from the top but I'd rather it just be spaced dynamically depending on the size of the banner.
* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #b4ecb4;
width: 100%;
overflow-x: hidden;
}
div#banner-content {
width: 100%;
margin: 0 auto;
padding: 10px;
border: 0px solid #000;
}
div#main-content {
padding-top: 110px;
}
<div id="banner">
<div id="banner-content">
<center>
<h1>
<big>
My name
</big>
</h1>
<small>
<p>sub heading here</p>
</small>
</center>
</div>
</div>
<div id="main-content">
<center>
<p>Main page content goes here</p>
</center>
</div>
Set <body> to display: flex and flex-direction: column. Give the banner position: relative and remove overflow-x: hidden.
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
}
div#banner {
position: relative;
top: 0;
left: 0;
background-color: #b4ecb4;
width: 100%;
/* overflow-x: hidden; */
display: block;
}
div#banner-content {
width: 100%;
margin: 0 auto;
padding: 10px;
border: 0px solid #000;
}
div#main-content {
/* padding-top: 110px; */
overflow-y: auto;
}
div#main-content center {
height: 5000px;
}
<div id="banner">
<div id="banner-content">
<center>
<h1>
<big>
My name
</big>
</h1>
<small>
<p>sub heading here</p>
</small>
</center>
</div>
</div>
<div id="main-content">
<center>
<p>Main page content goes here</p>
</center>
</div>
How to make flex child don't overlap top padding?
In this example child .large is centered middle, but its top is over top boundary of its parent because of its larger height. Is there a way to prevent this and make .large to be after .flex padding-top without JS? flex-start will be bad solution because blocks inside .flex can have small height and must be in the center of .flex. .flex must be positioned as absolute or fixed.
https://jsfiddle.net/zoxamy9f/1/
.large {
background: red;
height: 200%;
flex: 1;
}
html, body {
height: 100%;
overflow: hidden;
}
.flex {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 10%;
height: 100%;
background: black;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
<div class="flex">
<div class="large"></div>
</div>
If you add a wrapper between the flex and large, you can accomplish that
I also used viewport units vh instead of %, since percent won't work to enable vertical centering.
Fiddle demo
Stack snippet - much content
.wrapper {
display: inline-flex;
flex-direction: column;
width: 100%;
height: calc(100% - 10vh);
justify-content: center;
}
.large {
background: red;
width: 100%;
}
.flex {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 10vh;
height: 100%;
background: black;
overflow: auto;
box-sizing: border-box;
}
<div class="flex">
<div class="wrapper">
<div class="large">
Content 1
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
</div>
</div>
</div>
Stack snippet - little content
.wrapper {
display: inline-flex;
flex-direction: column;
width: 100%;
height: calc(100% - 10vh);
justify-content: center;
}
.large {
background: red;
width: 100%;
}
.flex {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 10vh;
height: 100%;
background: black;
overflow: auto;
box-sizing: border-box;
}
<div class="flex">
<div class="wrapper">
<div class="large">
Content 1
<br> Content
<br> Content
<br> Content
</div>
</div>
</div>
Is it possible by any chance that you could alter your structure to something like this?
.large {
background: red;
height: 200%;
flex: 1;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
}
.flex {
width: 100%;
height: 100%;
margin-top: 10%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
<div class="wrap">
<div class="flex">
<div class="large"></div>
</div>
</div>
I am trying to divide my page into 2 columns. I want content on the left with a padding on it together with a border. On the right I want my sidebar, which has a fixed width.
https://jsfiddle.net/mortenmoulder/04fkrkpp/
#container {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100%;
}
I have tried doing that, but I'm not sure if I should use space-between or something else. I have basically achieved what I want, but the padding should be equal on all the sides. How do I achieve that?
You can use flex-grow:1; instead of width:100%;, and you need to change of few other things as well
Use border directly on #left-container and add margin instead of padding, this will make the space equal to all sides.
See updated fiddle
body,
html {
height: 100%;
margin: 0;
}
#container {
display: flex;
flex-direction: row;
height: 100%;
}
#left-container {
flex-grow: 1;
border: 20px solid black;
margin: 50px;
}
#left {
height: 100%;
}
#right {
width: 300px;
border-left: 1px solid black;
}
<div id="container">
<div id="left-container">
<div id="left">
<p>
Some content here
</p>
<p>
Some content here
</p>
<p>
Some content here
</p>
</div>
</div>
<div id="right">
<p>
Right sidebar
</p>
</div>
</div>
check below code I just added flex: 1 and remove some unnecessary code from your demo
body,
html {
height: 100%;
margin: 0;
}
#container {
display: flex;
/*flex-direction: row;
justify-content: space-between;*/
height: 100%;
}
#left-container {
padding: 50px;
width: 100%;
flex: 1;
}
#left {
border: 20px solid black;
height: 100%;
/*width: 100%;*/
}
#right {
width: 300px;
border-left: 1px solid black;
}
<div id="container">
<div id="left-container">
<div id="left">
<p>
Some content here
</p>
<p>
Some content here
</p>
<p>
Some content here
</p>
</div>
</div>
<div id="right">
<p>
Right sidebar
</p>
</div>
</div>
https://jsfiddle.net/04fkrkpp/3/
I have created a jsFiddle that shows the content.
.container {
height: 100%;
width: 100%;
margin: 0;
}
.body {
position: relative;
height: 100%;
width: 100%;
margin: 0 auto;
background-color: #F7F4F2;
text-align: center;
}
.form {
background-color: #fff;
padding: 50px 20px;
color: #333;
}
.footer {
margin-top: 26px;
font-size: 20px;
line-height: 26px;
}
.content {
padding: 5% 5%;
}
<div class="container">
<div class="body">
<div class="content">
<div class="form">
<h1>Content</h1>
</div>
<div class="footer">
This is a link
</div>
</div>
</div>
</div>
What I am failing to do is to have the container element to fill the available viewport and have the inner white div also stretch to the bottom with the padding respected.
I would also like to move the link to the bottom of the viewport.
Is this possible without JavaScript?
How about something like this using flexbox?
Put display: flex; on .content
Then use flex: 1; on the main child div and then height: 100vh;.
Now you don't need all that width and height 100% styles.
Also used box-sizing: border-box so the padding doesn't mess with the size of the containers.
* {
box-sizing: border-box;
}
.container {
margin: 0;
}
.body {
position: relative;
margin: 0 auto;
background-color: #F7F4F2;
text-align: center;
}
.content {
display: flex;
flex-direction: column;
height: 100vh;
padding: 5% 5%;
}
.form {
flex: 1;
background-color: #fff;
padding: 50px 20px;
color: #333;
}
.footer {
margin-top: 26px;
font-size: 20px;
line-height: 26px;
}
<div class="container">
<div class="body">
<div class="content">
<div class="form">
<h1>Content</h1>
</div>
<div class="footer">
This is a link
</div>
</div>
</div>
</div>
Use this CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
You need height: 100%; on every parent, all the way up to html & body. Without it, the height won't be dynamic aren't going to work.
JSfiddle