I am struggling with the bottom part of the overflowing content as can be seen in the fiddle. How would you go about fixing this, while keeping this layout?
http://jsfiddle.net/Sa6cb/392/
CSS:
.wrapper {
overflow-y: hidden;
overflow-x: hidden;
border: 1px solid #000;
height: 200px;
width: 200px;
}
.wrappedheader {
position: static;
border-bottom: 1px solid #000;
padding: 15px;
}
.wrappedbody {
position: relative;
overflow-y: auto;
height: 100%;
padding: 15px;
}
HTML:
<div class="wrapper">
<div class="wrappedheader">
This is a header
</div>
<div class="wrappedbody">
<!-- Content causing overflow-y -->
</div>
</div>
Your wrappedbody has height 100%, which is 100% of its parent, wrapper. However, wrapper has two children, wrappedbody and wrappedheader. The height of wrappedbody should be the height of wrapper minus the height of wrappedheader:
.wrappedbody {
position: relative;
overflow-y: auto;
height: calc(100% - 79px); /* 79 = wrappedheader height + wrappedbody padding*/
padding: 15px;
}
http://jsfiddle.net/feihcsim/14auqpqd/
Related
So I have a left nav that can pop in and out. I put a little example without the popping in and out here: http://jsfiddle.net/crz4w89o/
But as you can see giving the left nav height:100% adds more room below the window and you can scroll down. But how do I make it so the height of the left nav just fills the window without adding more space?
HTML:
<div class="all">
<div class="header">header</div>
<div class="leftnav-container">
<! -- will be animated to pop in and out -->
<div class="flyout">
left nav content
</div>
</div>
</div>
CSS:
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.all {
height: 100%;
}
.header {
border-bottom: 1px solid black;
height:40px;
}
.leftnav-container {
height: 100%;
position: relative;
}
.flyout {
position: absolute;
top: 0;
background-color: lightblue;
width: 270px;
height: 100%;
transition: 0.4s;
overflow: scroll;
padding: 10px;
}
expected would be the content not overflowing outside the window. Maybe there is a better way to write this then using or relying on height 100%
You can make use of CSS calc() property to deduct a pixel amount from the height (vh units) of your nav container:
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.all {
height: 100%;
}
.header {
border-bottom: 1px solid black;
height:40px;
}
.leftnav-container {
height: calc(100vh - 61px);
position: relative;
}
.flyout {
position: absolute;
top: 0;
background-color: lightblue;
width: 270px;
height: 100%;
transition: 0.4s;
overflow: scroll;
padding: 10px;
}
<div class="all">
<div class="header">header</div>
<div class="leftnav-container">
<! -- will be animated to pop in and out -->
<div class="flyout">
left nav content
</div>
</div>
</div>
Breakdown of the changes made:
In .leftnav-container - we have set the height as calc(100vh - 61px)
100vh refers to '100% of the viewport height'
The 61px we deduct from this value is made up of:
.header border width and height (41px)
.flyout padding-top and padding-bottom values (20px)
Tried a few things(margin-auto, text align:center etc) to centre this relative div - which is the header in my responsive layout with no luck. Any other ways to try?
The problem is keeping it centered as the page expands/contracts
Its CSS properties are
#header {
height: 170px;
width: 100%;
overflow: visible;
padding: 10px;
margin-bottom: 7px;
position: relative;
z-index: 99;
}
How can a div appear visually centered when it's 100% width of its parent?
Check out this fiddle: https://jsfiddle.net/w6332ytc/
HTML:
<div class="wrapper">
<div class="inner">
Content
</div>
</div>
CSS:
.wrapper {
width: 100%;
background: #000;
height: 300px;
}
.inner {
width: 50%;
background: red;
margin: 0 auto;
}
I am currently writing on an Angular application that has a top fixed bootstrap navbar and a sidebar container that consists of a sidebar header and a scrollable sidebar list that displays some content.
Therefor I use the following CSS classes:
.main-wrapper {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
padding-top: 50px;
}
.sidebar-container {
height: 100%;
position: fixed;
padding: 0px;
margin-top: -50px;
padding-top: 50px;
border-right: 1px solid #ddd;
}
.sidebar-header {
position: relative;
padding: 15px;
border-bottom: 1px solid #ddd;
}
.sidebar {
height: 100%;
position: relative;
overflow-y: scroll;
}
And the following html code:
<div class="main-wrapper">
<div class="sidebar-container col-xs-3">
<div class="sidebar-header">
...
</div>
<div class="sidebar">
...
</div>
</div>
<div class="main-view col-xs-9 pull-right">
...
</div>
</div>
The following jsfiddle is a minimal working example:
https://jsfiddle.net/j1tuw3vj/8/
My problem is, that the sidebar is moved beyond the bottom of the page so the last element of the list is invisible. I cannot move it up by setting a negative margin and a padding to the sidebar, because I don't know the actual height of the sidebar header (its height can change in different views).
Replace:
/* Scrollable sidebar. */
.sidebar {
height: 100%;
position: relative;
overflow-y: scroll;
}
With:
/* Scrollable sidebar. */
.sidebar {
height: 85%;
position: relative;
overflow-y: scroll;
}
The problem is:
You adjusted the sidebar height to 100% and the position is relative.
See it Live.
UPDATE:
add this line to your css file.
.nav-pills li:last-child{
margin-bottom:80px;
}
See Update Here.
I have 2 divs with min-height . The first one has a top property of 470px. I want the second div to display staright underneath the first div without any space between. I have also tried display: block and putting the divs into a table, neither of which worked any better. Here is te css:
#content {
width: 100%;
position: absolute;
top: 470px;
background: #1C1C1C;
min-height: 100px;
overflow: hidden;
}
#content2 {
width: 100%;
position:;
top:;
background: #333333;
min-height: 100px;
overflow: hidden;
}
HTML:
<div id="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div id="content2">
<p>texttexttexttexttext</p>
</div>
Once you absolutely position an element you take it out of the document flow so you can't really have something come right after it unless you absolutely position it as well. I changed it to just use a top margin to put it where you want it. If you need elements in that top 470px then you can absolutely position those elements.
And the borders I put in are for illustration only.
#content {
border: 1px solid red;
margin-top: 470px;
background: #1C1C1C;
min-height: 100px;
overflow: hidden;
}
#content2 {
border: 1px solid blue;
background: #333333;
min-height: 100px;
overflow: hidden;
}
<div id="content">First DIV</div>
<div id="content2">Second DIV</div>
Because #content is positioned absolutely, you cannot do this without changing the HTML structure.
You can add a container element to the divs which is positioned absolutely with the same top as of #content1 and add the two divs inside the container without position.
#container {
width: 100%;
position: absolute;
top: 470px;
}
#content {
border: 1px solid red;
background: #1C1C1C;
min-height: 100px;
overflow: hidden;
}
#content2 {
width: 100%;
background: #333333;
min-height: 100px;
overflow: hidden;
}
<div id="container">
<div id="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div id="content2">
<p>texttexttexttexttext</p>
</div>
</div>
You haven't posted your HTML, but this is my wild guess.
Try this:
<style>
#content {
width: 100%;
position: relative;
background: yellow;
min-height: 100px;
overflow: hidden;
}
#content2 {
width: 100%;
position: relative;
background: blue;
min-height: 100px;
overflow: hidden;
}
</style>
<div id = "content">
<p> Content - 1 </p>
</div>
<div id = "content2">
<p> Content - 2 </p>
</div>
I have a parent div that contains a child div. I want the parent div to resize automatically so the child is always inside the parent's borders. Right now the bottom of the child div is extending beyond the bottom of the parent because of relative positioning. How do I get the parent resize?
#parentDiv {
margin: 40px 0 0 40px;
background-color: #eae;
width: 1500px;
height: auto;
}
#childDiv {
position: relative;
max-width: 400px;
min-height: 200px;
background-color: #B9D7D9;
top: 20px;
left: 20px;
}
<div id="parentDiv">
<div id="childDiv">
</div>
</div>
Relative positioning moves the element visually so if you want to contain it within the parent you'll need another method to move the child element.
Margin would seem to be the most obvious choice
#parentDiv {
background-color: #eae;
width: 500px;
margin: 40px;
overflow: auto;
}
#childDiv {
position: relative;
max-width: 400px;
min-height: 200px;
background-color: #B9D7D9;
margin-top: 20px;
margin-left: 20px;
<div id="parentDiv">
<div id="childDiv"></div>
</div>
Got rid of the positioning of the childDiv.
Outlined the elements so you can see them clearly.
Since there's min and max dimensions, I put 100% height and width for explicit measurements.
body {
height: 100vh;
width: 100vw;
}
#parentDiv {
margin: 40px 0 0 40px;
background-color: #eae;
width: 1500px;
outline: 2px dashed blue;
}
#childDiv {
max-width: 400px;
width: 100%;
min-height: 200px;
height: 100%;
background-color: #B9D7D9;
outline: 2px solid red;
}
<div id="parentDiv">
<div id="childDiv">
</div>
</div>