I have this css because I have two static navbars with fixed position.
But the #page takes height of its content and not of screen size, so it doesn't scroll.
I already tried height:100vh;
Any solution to make this #page take all the available space in the view so it makes the scroll useful?
#page {
position: relative;
margin-top: 110px;
margin-left: 220px;
padding: 15px 15px 15px 15px;
height: 100%;
overflow: scroll;
}
NAVBARS
.navbar-right{
width: 220px;
left: 0;
top: 0;
margin-top:110px;
position: fixed;
}
.navbar-top{
border-bottom-color: #fe6803 !important;
border-bottom: 5px solid;
position: fixed;
height: 110px;
left: 0;
width: 100%;
}
This will make the page fill out the screen, and subtract the margin above:
#page {
position: relative;
margin-top: 110px;
margin-left: 220px;
padding: 15px 15px 15px 15px;
overflow: scroll;
height: calc(100vh - 110px);
}
In order to make something of 100% height, parent of this element needs to also have a defined height. That includes body and html elements if it is the parent.
So if #page is a div inside another div (let's call it divA) inside body. Then html, body, divA and #page needs to be defined with 100% height.
html, body {
height:100%;
}
#page {
position: relative;
margin-top: 110px;
margin-left: 220px;
padding: 15px 15px 15px 15px;
height: 100%;
overflow: scroll;
}
In JSFiddle
This differs in behavior from width as width is often pre-defined to 100% width whereas the heights are automatic.
Related
Take a look at this fiddle: https://jsfiddle.net/hkbynkmf/1/
How do I let the green border flow around all the divs, with no div "overflowing" the border? The upper div is OK, but the lower one is not.
Also, I need some distance between the divs;
I know that padding and margin is transparent, so I chose (a green) border to illustrate my point. In the end, the clearance should be transparent.
HTML:
body {
position: relative;
background-color: #ff0000;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 0px;
border: 10px solid #190;
margin: 0px;
}
#header {
position: relative;
margin:0 auto; /* div will be H-centered */
top: 10px;
left: 0px;
bottom: 0px;
right: 0px;
width: 960px;
height: 250px;
background-color: #DDDDDD;
overflow: hidden; /* Keep all sub-elements inside this div */
}
#intro {
position: relative;
margin:0 auto; /* div will be H-centered */
top: 15px;
left: 0;
bottom: 0px;
right: 0px;
width: 960px;
height: 150px;
background-color: blue;
overflow: hidden; /* Keep all sub-elements inside this div */
}
<body> <!--position: relative;-->
<div id="header"> <!--position: relative;-->
</div>
<div id="intro"> <!--position: relative;-->
</div>
</body>
You're using the top attribute to move your intro div 15px down, below the header. This is causing the 15px overlap with the container. When positioning items this way you should consider using margin to apply the change, rather than the positioning attributes of top, right, bottom or left.
You have a lot going on with your CSS which is making the stylesheet much more complicated than it needs to be. I have simplified your CSS as follows to achieve the same effect:
body {
background-color: #ff0000;
border: 10px solid #190;
margin: 0px;
padding: 0px;
}
a img {
border:none;
}
#header {
background-color: #DDDDDD;
height: 250px;
margin:0 auto;
overflow: hidden;
width: 300px;
}
#intro {
background-color: blue;
height: 150px;
margin:15px auto 0;
overflow: hidden;
width: 300px;
}
See updated fiddle
In your code, the #intro is positioned 15px below the #header. Doing so leaves no place for the div in body.
Not sure what you are trying to achieve here with position: relative; but the #intro can be written like
#intro
{
margin:10px auto;/* div will be H-centered */
width: 300px;
height: 150px;
background-color: blue;
overflow: hidden;/* Keep all sub-elements inside this div */
}
Using the margin top property on the #intro div will allow the green border to flow, while also having the space in between the divs. Here is the fiddle:
https://jsfiddle.net/hkbynkmf/17/
#intro
{
position: relative;
margin:15px auto 0px auto /* div will be H-centered */
left: 0;
bottom: 0px;
right: 0px;
width: 300px;
height: 150px;
background-color: blue;
overflow: hidden; /* Keep all sub-elements inside this div */
}
html, body {
min-height: 100%;
margin: 0;
padding: 0;
overflow-y: hidden;
}
#sidebar {
background-color: white;
height: 100%;
width: 20%;
float: left;
position: fixed;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
padding-bottom: 6em;
overflow-x: scroll;
}
The sidebar has a scroll which moves approximately 50px off the screen, please refer to image provided. I have tried using padding or margin on both body and #sidebar, to no avail.
Because you have no set height on #sidebar's container, 100% height will be auto. The scrollbar will be the size of it's container (#sidebar) so it will just stretch. Try something like this:
#sidebar {
top: 0;
bottom: 0;
}
You could also use window units:
#sidebar {
height: 100vh;
}
I'm having an issue here. Simple layout with header, nav bar, and content divs inside of a container with 100% height, but I'm still getting a vertical scroll bar.
style.css
html, body {
margin: 0px;
padding: 0;
background: #E6E6E6;
}
#container{
width: 900px;
height: 100%;
position: relative;
left: 450px;
}
#header{
width: 900px;
height: 70px;
position: absolute;
background-color: #FFFFFF;
border: 1px solid black;
}
#navBar{
width: 900px;
height:20px;
position: absolute;
top: 77px;
background-color: #FFFFFF;
border: 1px solid black;
}
#content{
width: 900px;
height: 100%;
position: absolute;
top: 104px;
background-color: #FFFFFF;
border: 1px solid black;
}
according to your comment about overflow: hidden removing a border try this:
overflow-y: hidden;
that only removes the vertical scrollbar, like you asked.
Assuming that #header, #navbar and #content are children of container, the reason is quite obvious. #content is also set to 100% height and additionally has a top value. So, it's full height and then shifted down, of course resulting in a vertical scrollbar.
One solution would be to add
overflow: hidden;
to #container, but that would just cut the content. You need to calculate the height correctly:
#content { height: calc(100% - 106px); }
See the DEMO.
Additional information: I substract 106px due to the top margin of 104 plus 2px for the borders.
your height: 100% in the #container { causes this problem.
if you want to fix this, you have to set bottom: 0
JSFiddle
html, body {
margin: 0px;
padding: 0;
background: #E6E6E6;
height: 100%; /* added this to html,body*/
}
#content{
width: 900px;
bottom: 0; /* set this instead of height: 100%*/
position: absolute;
top: 104px;
background-color: #FFFFFF;
border: 1px solid black;
}
I'm trying to get a div to fill the remaining height of a div. Here's my HTML and CSS:
CSS:
* {
padding: 0px;
margin: 0px;
}
#container {
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
width: 250px;
height: 100%;
background: #666666;
}
HTML:
<div id="container">
<div id="topbar">
</div>
<div id="leftbar">
</div>
</div>
I expected leftbar to fill the height between the bottom of topbar and the bottom of container, but it's scretching container so that leftbar is 100% of the page height.
You can stretch the leftbar with absolute positioning and setting the top/bottom values:
* {
padding: 0px;
margin: 0px;
}
#container {
position: relative;
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
position: absolute;
top: 85px;
bottom: 0;
width: 250px;
background: red;
}
Fiddle:
http://jsfiddle.net/robertp/CQ7pf/
Try adding this to container:
position: relative;
and then add this to leftbar:
position: absolute;
top: 0;
bottom: 0;
Set your left bar to position: relative;
So leftbar should be container's height minus topbar's height. Since container and topbar have hard-coded height values, it follows that leftbar will have to be hard-coded also. It's not the prettiest thing in the world but it's simpler than the alternative, JavaScript.
If container is 500px in height, subtract the height of topbar (85) and container's margin (85) to arrive at a height of 330px. Since container uses min-height, use min-height for leftbar also to allow it to stretch the container if need be. You should also change leftbar's position to relative to render the height of container correctly.
Bottom line:
#leftbar {
position: relative;
min-height: 330px;
}
I've got the following piece of CSS in which i want the navigation and the website to be absolutely positioned so i can slide them back and forth when the menu button i pressed(Like the facebook app for example). To do so i've got a container with an overflow: hidden(To hide the nav bar and slide it in when needed). However; the container loses it's autoheight because of the absolute positioning within i'm afraid.
How can i get the height to be set automatically again as overflow: hidden does without absolute positioning in it.
i've created a fiddle in which the container has a height of 500px. I want to make the height scale automatically though. http://jsfiddle.net/rB7EY/
div {
box-sizing: border-box;
}
.container {
overflow: hidden;
width: 100%;
max-width: 60em;
padding: 0;
margin: 0 auto;
position: relative;
background: grey;
height: 500px;
}
/*CSS for the navigation bar that can be toggled*/
.navigation {
width: 15em;
float: left;
background: blue;
position: absolute;
left: -20px;
}
/*The CSS for the actual content*/
.website {
width: 100%;
float: left;
position: absolute;
left: 0px;
}
.container .website .top_bar {
height: 4em;
background: pink;
padding: 1em;
position: relative;
}
.container .website .top_bar .menu_button {
width: 3.2em;
height: 2.5em;
background: red;
border: 0px;
}
nav.menu {
width: 15em;
position: absolute;
left: 1em;
top: 3em;
background: yellow;
}
If I understand you well, enough you want to scale the container automaticly? Try using a min-height and a max-height
I fixed it by using a div between the container and the navigation and website and gave that a absolute position. With that i've decided to make the container be min-width: 100%