This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Make a div fill the height of the remaining screen space
(41 answers)
Closed 2 years ago.
I'm trying to build a modal screen using CSS, HTML. Code below:
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
}
.content {
border-radius: 4px;
background-color: white;
padding: 16px;
height: 80vh;
width: 80vw;
}
.title {
padding: 16px;
}
.body {
padding: 16px;
height: 100%;
width: 100%;
background-color: blue;
min-height: 0;
}
<div class="container">
<div class="content">
<div class="title">The bugged modal screen</div>
<div class="body">
This is overflowing
</div>
</div>
</div>
As the example shows, the flex child (blue content) is overflowing its parent. I've tried to use min-height: 0 seens not to be working for me. Help apprecited to put the child inside inside its boundaries.
Add flex rules to container .content. Like this:
.content {
...
display: flex;
flex-direction: column;
}
Also, remove width: 100% out of .body.
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
}
.content {
border-radius: 4px;
background-color: white;
padding: 16px;
height: 80vh;
width: 80vw;
display: flex;
flex-direction: column;
}
.title {
padding: 16px;
}
.body {
padding: 16px;
height: 100%;
/*width: 100%;*/
background-color: blue;
}
<div class="container">
<div class="content">
<div class="title">The bugged modal screen</div>
<div class="body">
This is overflowing
</div>
</div>
</div>
Related
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 10 months ago.
I like to have a div that keeps all it's children in the center (vertical and horizontal). I can easily achieve this by using flexbox. But when width of my children get bigger than the parent, a part of children is not visible.
How can I fix this?
Codepen
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.children {
min-width: 1200px;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
You just have to change the justify-content to be flex-start
See below.
And if you want the H1 to be centered, just use text-align: center
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: scroll;
}
.children {
min-width: 1200px;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
Change the .container{
min-width: 100%}
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.children {
min-width: 100%;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Make a div fill the height of the remaining screen space
(42 answers)
Closed 1 year ago.
I am trying to vertically center text inside a child div that is full height, but when I do that it has extra spacing at the bottom. How can I do this without the extra spacing? I'd like to have a nav along with some vertically centered text, but without the extra spacing.
html {
height: 100%;
}
body {
margin: 0;
min-height: 100vh;
}
h1 {
margin: 0;
padding: 0;
}
.landing {
background: url(bg.svg);
height: 100vh;
}
.landing-content {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.landing-content h1 {
color: white;
margin: 0;
}
.app {
background-color: black;
height: 100vh;
color: white;
}
<div class="app">
<div class="logo">
<h1>logo</h1>
</div>
<div class="landing">
<div class="landing-content">
<h1>hi, i'm jordan</h1>
</div>
</div>
</div>
The use of height: 100vh was not suitable, what it does is recognize the view-width as its height and that limit limits the height and recreate a small crack at the bottom. You can try using height: 100% instead
html {
height: 100%;
}
body {
margin: 0;
min-height: 100vh;
}
h1 {
margin: 0;
padding: 0;
}
.landing {
background: url(bg.svg);
height: 100vh;
}
.landing-content {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.landing-content h1 {
color: white;
margin: 0;
}
.app {
background-color: black;
height: 100%;
color: white;
}
<div class="app">
<div class="logo">
<h1>logo</h1>
</div>
<div class="landing">
<div class="landing-content">
<h1>hi, i'm jordan</h1>
</div>
</div>
</div>
Remove landing class height and add landing-content class height to 100%. When you add landing class height to 100vh, It covers 100vh height. But logo class already covers some height. so it overflows.
.landing {
background: url(bg.svg);
}
.landing-content {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
working fiddle - https://jsfiddle.net/alimurrazi/36svho08/1/
Since .app has the default display: block, .logo takes up however much space it needs, then .landing goes underneath, taking up an additional 100vh, so that you need to scroll to view its full content.
The solution here is either to simply add overflow-y: hidden to .app, but that still leaves your text off center by a bit. Another solution would be to give .app display: flex, and using flexbox to distribute the space as needed.
html {
height: 100%;
}
body {
margin: 0;
min-height: 100vh;
}
h1 {
margin: 0;
padding: 0;
}
.landing {
background: url(bg.svg);
flex-grow: 1;
}
.landing-content {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.landing-content h1 {
color: white;
margin: 0;
}
.app {
background-color: black;
height: 100vh;
color: white;
display: flex;
flex-direction: column;
}
<div class="app">
<div class="logo">
<h1>logo</h1>
</div>
<div class="landing">
<div class="landing-content">
<h1>hi, i'm jordan</h1>
</div>
</div>
</div>
Change the .app class as follow.
.app {
background-color: black;
height: auto;
color: white;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
Lets say I have this simple html page:
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
My header is fixed and the content should be beneath it and with height 100% of what ever left of the body.
I've already done that with this style:
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
Here's how the page looks for now: https://elbargho.github.io/sudoku/centerdiv.html
now I'm trying to center the box div horizontally and vertically in relative to the full body - the header size
what I've tried to do:
margin-top: 50% - for some reason the box went all the way down to the bottom
setting the position of content div to relative, and of box div to absolute - the content div overlapped the fixed header
You can set content class as
.content {
/* flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
/*flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
This is probably what you need. Documented in the code.
* {
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
/* Modified */
.header {
background-color: red;
text-align: center;
/* position: fixed; */
position: sticky;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
/* Modified */
.main {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
}
/* Modified */
.content {
/*flex: 1;*/
display: flex;
align-items: center;
height: inherit;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
Here solution:
.content {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
One way is to use CSS Transform.
.box {
position: relative;
top: 50%;
transform: translateY(-50%);
/* horizontal center */
margin: 0 auto;
}
Check out this website for all CSS centering help:
http://howtocenterincss.com/
I have a fixed-height interface I'm styling with CSS. I want it to be responsive to browser height (and, eventually, width... but one problem at a time) and I have a fiddle in which the interface operates almost exactly as I'd like it to with respect to browser height... with one exception.
I use a flexbox layout with object-fit: scale-down to force the row of images in the green div to shrink when their containing div is not tall enough to fit the images at native dimensions. This results in some "padding," the existence of which is perfectly well explained here. I've made the background color of the relevant div blue so that you can clearly see the visual space I'm talking about. I do not want this space to appear at all.
So, what is the proper way to make a row of images responsive in the way I'd like without introducing additional visual space between the images if object-fit cannot do this? Thank you for the input.
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
display: block;
object-fit: scale-down;
min-height: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex: 0 1.5 auto;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 0;
background-color: green;
}
.context {
display: flex;
flex-direction: column;
max-height: 100%;
background-color: blue;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
align-items: end;
background-color: orange;
}
.primary img {
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
<div class="container">
<div class="flex-column">
<div class="primary">
<img src="https://via.placeholder.com/200">
<div class="mask">
<img src="https://via.placeholder.com/200/FF000">
</div>
</div>
<div class="flex-row">
<div class = "context">
<img src="https://via.placeholder.com/75x250">
</div>
<div class = "context">
<img src="https://via.placeholder.com/150x75">
</div>
</div>
<div class="nonimage">
<div class="smallhint">Some Text<br>Other Text</div>
</div>
</div>
</div>
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 3 years ago.
I want to create a bar to go along the top of a box on a website that I am working on.
This is the desired outcome
Here's my code, I keep getting this overlap
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
height: 30%;
margin: 1vw;
padding: 1vw;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.section h1 {
position: relative;
}
.section_header {
border: 4px solid #FBA7FF;
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 95%;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
So far I've got the parent div with position: relative and the child element with position: absolute then setting top and left to 0 width to 100% and bottom to 95% to attempt the desired effect yet it creates an overlap.
I can see that 0 is within the div and doesn't take into account the border which is perhaps why this is happening.
* {
box-sizing: border-box;
margin: 0;
}
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
width: 100%;
display: inline-block;
text-align: center;
}
.section_header {
width: 100%;
background: #FBA7FF;
display: block;
height: 70px;
margin-bottom: 20px;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
Remove the position:absolute and use flex-direction:column;
* {
margin: 0;
padding: 0;
}
.page {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
background: lightgrey;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
margin: 1vh auto;
height: 30%;
background: lightgreen;
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
}
.section_header {
height: 50px;
width: 100%;
background: orange;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>