Below is a screen shot of my window image after scrolling window
I have given height of 45px to my header and for main section am using flex. Inside main section I have left-section and right-section. I want my left section to take full screen height whenever I minimize or maximize my window.
This is how my page looks when am scrolling. The left panel is not getting adjust with scrolling, though I have given height of 100%
HTML
<body>
<header></header>
<div class="main-section">
<div class="left-section"></div>
<div class="right-section"></div>
</div>
</body>
CSS
body {
min-height: 100%;
width: 100%;
overflow: auto;
display: flex;
flex-direction: column;
}
header {
height: 45px;
width: 100%;
overflow: hidden;
display: block;
}
.main-section {
width: 100%;
position: relative;
right: 0;
left: 0;
bottom: 0;
flex-grow: 1;
overflow: auto;
}
.left-section {
position: absolute;
width: 200px;
height: 100%;
}
Problem -
height : 100%
It refers to the height of Parent element (.main-section) and then sets height of the element(.left-section) to 100% of that. If the parent element's height is not set to anything then browser has nothing to refer to.
Solution - Set the height of .main-section then .left-section will take its height.
Hope this helps!!
Related
I'm trying to make a fixed position div stuck to the bottom of the page, that has the starting height, 70% of the screen ( like vh ).
I will make it resizable with jQuery resizable.
The problem is that if I apply height: 70vh or height: 70%, the div resizes when the user resizes the browser height, and I want to keep it the same.
Any idea what to do?
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
background-color: red;
}
<div>
</div>
View the snippet in full page.
vh or % will be relative to the height of the viewport or screen height. So we need to set the initial height of the div with JavaScript on DOM load.
Next (The resizing part) can be done with CSS resize property.
**PS: In the div bottom right corner you can see the resize icon and do the resizing.
document.getElementById("demo").style.height = window.innerHeight*.7+"px";
div {
position: fixed;
bottom: 0px;
width: 500px;
background-color: red;
resize:vertical;
overflow:auto;
}
<div id="demo"></div>
You can add min-height to div so that it will not resize itself beyond a specific height.
Like this
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
min-height: 500px;
background-color: red;
}
<div>
</div>
I'm trying to achieve a fixed left sidebar with fluid right content within a container.
I've checked out answers that tell me to set a margin-left on the content which is not what I want to do.
The closest I could get was through this answer:
A `position:fixed` sidebar whose width is set in percentage?
<div class="main-container">
<div class="sidebar">
<div class="sidebar-content-container">
<div class="sidebar-content">
<!-- Sidebar content here -->
</div>
</div>
</div>
<div id="content">
<!-- Scrollable Content Here -->
</div>
</div>
This is the CSS
.main-container {
height: 100vh;
max-width: 1366px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 100px;
width: 100%;
position: relative;
.sidebar {
float: left;
width: 20%;
height: 100%;
position: relative;
.sidebar-content-container {
height: 100%;
position: fixed;
.sidebar-content {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
}
}
#content {
height: 100%;
width: 80%;
display: inline-block;
float: right;
}
}
The way I have it done right now, once you inspect the sidebar, the width it calculates is not within the main-container but the rest of the viewport. What I'm trying to achieve is to keep the 20% calculation within the main-container without setting a fixed width.
So the yellow part represents the problem for me. Once I set it fixed, it doesn't stay within the parent container. My goal is after I set it to fixed, it stays within the red part.
I know I could do something like sidebar width 100px content margin-left 100px but that's not the objective and do not like any javascript alternatives.
Thoughts?
Thanks!
Your are using width:100% in this div and also padding which increases its width from 100% because padding adds to the width. So for giving the padding within the 100% width you can use property box-sizing:border-box as below:
.main-container {
height: 100vh;
max-width: 1366px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 100px;
width: 100%;
position: relative;
box-sizing:border-box;
}
Well, I guess that's the thing with fixed elements. They kind of have a mind of their own. Once an element is fixed, it doesn't seem to obey the overflow and dimension rule of its parent containers. They take their dimensions (if you are using %) from the browsers width. So I think what you should do is to give the fixed element the same dimension as its immediate container.
<div id="parent-box">
<div id="fixed-elem"></div>
</div>
//css
#parent-box{
position: relative;
width: 40%;
height: 100%;
float: left;
overflow: hidden;
}
#fixed-elem{
position: fixed;
width: 40%;/*this is 40% of the browser width not the container*/
height: 100%;/*this is 100% of the browser height*/
}
My container is not touching my footer for the majority of cases and I'm not sure what's going on.
So here is my CSS code:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
section {
height: 100%;
}
#container {
overflow: auto;
width: 80%;
margin: 0 auto;
background: red;
height: 100%;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Here's my HTML:
<body>
<div id="container">
<section>
<p>Content goes here</p>
</section>
</div>
<div class="footer">Content</div>
</body>
So I have all of the heights set for parent elements,but there's still a big gap between the container and the footer. In cases where the content takes up the whole page, the footer and container ends up touching, but the content for some reason gets lost in the footer. How can I solve this issue?
Height based on percentage are tricky. vh is much better for such purposes.
Here is the solution: JSfiddle
#container {
overflow: hidden;
width: 80%;
margin: 0 auto;
background: red;
height: 100vh;
}
Make one adjustment to your CSS:
Add height: 100% to the html element.
html {
height: 100%; /* NEW */
min-height: 100%;
position: relative;
}
This will clear the way for all child elements to recognize their percentage heights, and the container will expand. Your min-height: 100% will still work because min-height overrides height.
DEMO: http://jsfiddle.net/au6tcodc/
(You'll notice a vertical scrollbar on the container in the demo. This is caused by the overflow: auto declaration in #container. If you want to remove the scrollbar switch to overflow: hidden (see all overflow values).
i'm working on a page in wordpress which shows 8 divs with some content.i want to show those all divs to 100% of window height in all devices and then when user click on the link next it shows another div one after another on clicking next, but somehow my divs are not going 100% in height.
Here is the css:
<style>
html {
height: 100%;
}
body {
line-height:25px;
margin: 0;
padding: 0;
height: 100%;
}
.content {
margin: auto;
min-height: 100%;
}
</style>
Here is the html:
<div class="container">
<div class="content" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>
<div class="content" id="Initial" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>
</div>
Here is the link for my dummy page:
http://enablersinvestment.com/backend/how-it-works-scroll/
You just need to set .content min-height to be 100vh as follows:
.content {
margin: auto;
min-height: 100vh;
}
checkout this demo: http://jsbin.com/xayaku/1/
You need to set the height of .container to 100% as well:
html {
height: 100%;
}
body {
line-height:25px;
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100%;
}
.content {
margin: auto;
min-height: 100%;
}
Your problem here is that your content is inside the container and container does not have height: 100%.
Add the following rule to your css and you should be fine.
.container {
min-height: 100%;
}
If im correct The child adepts the percentage height to the height of the parent.
And in your case the child is content en the parent is container. You should give container a height of 100%.
.container {
min-height: 100%;
}
Do correct me if im wrong
To get divs to fill the whole webpage, you must add this line:
position: absolute;
For example:
div.content {
position: absolute;
height: 100%;
}
Without that line, the '100%' will be considered as the size of what is inside the div.
I have the following code:
HTML
<div class="container">
<div class="fixed-area">
<div class="content"></div>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
html, body, body * {
z-index: 3;
}
div.container {
height: 100%;
position: relative;
background-color: #000000;
z-index: 1;
}
div.fixed-area {
position: relative;
width: 960px;
height: 100%;
margin: 0 auto;
background-color: #ffff00;
}
div.content {
position: relative;
width: 600px;
height: 1500px;
margin: 0 auto;
background-color: #ff0000;
}
The container (black) and fixed-area (yellow) divs do not expand with the content div (red) to cover the scrollable area. When scrollbar is used to view the bottom part of the content, a white background takes the place of the container and fixed-area divs. How can make the container and fixed-area divs expand to cover all background of the content, even when scrolled down?
If .container should have a minimum height of 100%, but should grow with the .fixed-area container, use:
height: auto;
min-height: 100%;
See: http://jsfiddle.net/gopeter/B2Ljt/4/ (shows how min-height works) and http://jsfiddle.net/gopeter/B2Ljt/3/ (shows how .container grows with .fixed-area)
Change container height to auto
Change to your container to this CSS
div.container {
height: auto;
position: relative;
background-color: #000000;
z-index: 1;
}
You had to change your container's height to auto;
You made the container's height 100%, which you didn't want. Simply remove this style.
JSFiddle demo