I want to make the height of the paragraph 100%, but when I try it doesn't do it. Setting the size in pixels does work. What I have:
*,
html,
body {
margin: 0;
padding: 0;
height: 100%;
list-style: none;
}
.infoDiv {
height: 50%;
background: grey;
background-size: cover;
opacity: 0.6;
}
.textStart p {
height: 100%;
display: table-cell;
vertical-align: middle;
}
<div class="infoDiv">
<div class="imgStart col-xs-12 col-sm-7"></div>
<div class="textStart col-xs-12 col-sm-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
EDIT: The solution is giving it the ViewHeight (vh).
Here is the working code
*,
html,
body {
margin: 0;
padding: 0;
height: 100%;
list-style: none;
}
.infoDiv {
height: 50%;
background: grey;
background-size: cover;
opacity: 0.6;
}
.textStart p {
height: 100vh;
display: table-cell;
vertical-align: middle;
}
<div class="infoDiv">
<div class="imgStart col-xs-12 col-sm-7"></div>
<div class="textStart col-xs-12 col-sm-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
In CSS3 you could use
height: calc(100% - 60px);
Related
I have a div which is horizontally and vertically centred in the viewport. So I know the content will always be accessible, I allow the page to scroll when the content is taller than the viewport.
This appears to work fine, however, I am using a background-image on the div with an overlay on the :before pseudo-element to fade out the background. At first the background scroll, which I was able to resolve with background-attachment: fixed. Now the problem I have is that the overlay div scrolls up along with the page, so the area 'below the fold' doesn't now have a darkened background.
I know this is down to the position: absolute but when I change the position to fixed the desired effect is achieved but the overlay then covers the vertical scrollbar - is there a way around this?
I know I could use an image already darkened but this is markup that is used elsewhere and is being reused, so I'd like to find a CSS solution if possible.
Thanks in advance!
Code example attached + a CodePen version (https://codepen.io/moy/pen/xxbwvdL) depending on your preference. :)
html,
body {
margin: 0;
padding: 0;
}
h1,
p {
margin: 0 0 30px;
padding: 0;
}
.masthead {
background-color: rgb(0,0,0);
background-image: url("https://www.fillmurray.com/1920/1080");
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
color: white;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
overflow: hidden;
overflow-y: auto;
padding: 60px 0 30px;
position: relative;
width: 100%;
}
.masthead:before {
background: rgba(0,0,0,.45);
content: "";
display: block;
height: 100%;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}
.wrap {
margin: auto;
padding: 0 30px;
z-index: 12;
max-width: 900px;
}
.masthead--fullbleed {
height: 100vh;
overflow-y: auto;
}
<section class="masthead masthead--fullbleed">
<div class="wrap wrap--narrow align-center">
<div class="hgroup">
<h1 class="hgroup__title">Title here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
Urgh, why is it when you've been stuck on something then you post and instantly think of a solution (I think).
So basically, I changed height: 100vh to min-height: 100vh That seems to do the trick unless anyone can spot a problem with it. Attached snippet to reflect this.
You can tell I haven't coded for a year+ I guess :/
html,
body {
margin: 0;
padding: 0;
}
h1,
p {
margin: 0 0 30px;
padding: 0;
}
.masthead {
background-color: rgb(0,0,0);
background-image: url("https://www.fillmurray.com/1920/1080");
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
color: white;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
overflow: hidden;
overflow-y: auto;
padding: 60px 0 30px;
position: relative;
width: 100%;
}
.masthead:before {
background: rgba(0,0,0,.45);
content: "";
display: block;
height: 100%;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}
.wrap {
margin: auto;
padding: 0 30px;
z-index: 12;
max-width: 900px;
}
.masthead--fullbleed {
min-height: 100vh;
overflow-y: auto;
}
<section class="masthead masthead--fullbleed">
<div class="wrap wrap--narrow align-center">
<div class="hgroup">
<h1 class="hgroup__title">Title here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
try changing:
.masthead--fullbleed {
height: 100vh;
overflow-y: auto;
}
to
.masthead--fullbleed {
overflow-y: auto;
}
EDIT
Alternative is to attach the dark overlay to the body
.body:before {
background: rgba(0,0,0,.45);
content: "";
display: block;
height: 100%;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 4;
}
I am creating a layout but I am getting some issue with the position.
I tried position: absolute but I am getting some issue.
I user display: flex and flex:1 for display the equal height of the div.
Would you help me out in this?
I tried below code to set.
.set_white_box{
position: absolute;
width: 50%;
top: 50%;
transform: translateY(-50%);
}
I added a simple structure in the snippet.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>
you can use transform to move the image around and z-index to change order
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
/* translate to move it around */
transform: translate(-50px, 50px);
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
/* z-index to bring text to front */
position:relative;
z-index: 2;
}
/* jsut using nth-child to target the 2nd version */
.equal_padding:nth-child(even) .service_img_col {
transform: translate(50px, -50px);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>
Please try following code. also you can add multiple box no change design and looking good with left & right side align
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.equal_padding:nth-child(2n + 1) .service_img_col {
position: relative;
left: -50px;
top: 30px;
}
.equal_padding:nth-child(2n + 2) .service_img_col {
position: relative;
right: -50px;
top: -30px;
}
.equal_padding:nth-child(2n + 1) {
padding-left: 50px;
}
.equal_padding:nth-child(2n + 2) {
padding-right: 50px;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
border: 4px solid #000;
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
position: relative;
z-index: 9;
border: 4px solid #000;
}
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>
I created a parent div with fixed size which contains 2 children, but I want that only the second one will have overflow: auto;
Unfortunately, it doesn't work as expected...
Here is my snippet:
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
Any ideas?
You can use max-height CSS a property. With the help of max-height, You can set the maximum height. If the content is exceeding the maximum height, Y scroll will be automatically implemented.
Code
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
overflow: auto;
max-height:100px
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
You should set a max-value before the overflow kicks in...
EDIT: Set max-height to % so that it will always be within you changing needs. I kept it as 80% here since it fits in within the second-child nicely
.second-child
{
max-height: 80%;
overflow: auto;
}
Now it should be good!
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
max-height: 80%;
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
Updated:
Define a max-height to tell the browser after what length the overflow would take place
Update 2:
Make the container a table
Make the other 2 div's table-rows
In 2nd div, put the text in a position relative following position absolute
.parent {
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
display: table;
}
.first-child,
.second-child {
display: table-row;
}
.second-child {
height: 100%;
}
.second-child-content-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.second-child-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
<div class="second-child-content-wrapper">
<div class="second-child-content">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>
</div>
I've been trying to solve a number of issues for this questionnaire I'm making. I've reformatted this question because my old one was pretty confusing and I'm taking a new angle on the issue.
With the new code I've summited the problem is that the child div .question-container inside the .questionnaire-box is spilling out all the text past the set height. I prefer .question-container to have the same height as .questionnaire-box and scroll on overflow.
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 2rem 0;
background-color: rgba(100, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
background-color: #ffffff;
}
.question-container {
max-height: 80%;
overflow-y: scroll;
}
.questionnaire-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
text-align: center;
}
button {
margin 1rem;
}
<html>
<body>
<div class="questionnaire-container">
<div class="questionnaire-box">
<div class="question-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="questionnaire-nav">
<button>Submit</button>
</div>
</div>
</div>
</body>
</html>
This is what it looks like inside my app.
And this is what I'm trying to achieve.
The question is a little overly-complex, but I assume the problem here is that you're unable to scroll down and view all of the content in .question-container.
Does this work?
https://jsfiddle.net/tobyl/bemkkz72/
If so, the critical CSS is the additional padding-bottom in this block:
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem 6rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
There were quite a few things I changed in your code for the snippet below - it will be too much to explain everything. Still, some of the most important changes:
No flexbox
Fixed element (nav) outside of the DIV above it
Look at the code. I can explain more, if this is what you are after, but not tonight (i.e. "good night" :-)...
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
.questionnaire-container {
width: 100%;
height: calc(100% -50px);
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
width: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
}
.questionnaire-nav {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
height: 30px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
padding: 10px 0;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p>
<p>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor</p>
<p>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form></body>
</html>
Try to change these three things in .questionnaire-nav:
position to fixed
width to 75%
and deleted margin-left: -20px;
Does this work for you?
html, body {
max-height: 100%;
}
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
overflow-y: auto;
}
.questionnaire-nav {
display: flex;
position: fixed;
bottom: 0;
align-items: center;
justify-content: center;
width: 75%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form>
</div>
</body>
</html>
I have a container div set to a fixed position at top of page and several relative position divs scrollable within the container. I can set margin left, right and bottom. But the top margin is ignored and runs up against the top of the container. What am I doing wrong here?
#container {
position: fixed;
width: 32rem;
height: 32rem;
background-color: #000000;
overflow: hidden;
}
#div1 {
position: relative;
width: 30em;
height: 40em;
margin: 5rem 1rem 5rem 1rem;
<div id="container">
<div id="div1"></div>
</div>
You need to add overflow:hidden and change height:22em in #div1
I think you want something like this and I hope it will helps you.
#container {
position: fixed;
width: 32rem;
height: 32rem;
background-color: #000;
overflow: hidden;
}
#div1 {
height: 22em;
margin: 5rem 1rem;
overflow: hidden;
position: relative;
width: 30em;
color:#fff;
}
<div id="container">
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Is this the desired output? http://jsfiddle.net/t9rkpspu/
#container {
position: fixed;
width: 32rem;
height: 32rem;
background-color: #000000;
overflow: hidden;
}
#div1 {
color: white;
position: relative;
width: 30em;
height: 40em;
margin: 5rem 1rem 5rem 1rem;
}