I've made the following layout for my application:
<div class="app-container">
<header>header </header>
<main>
<mat-sidenav-container>
<mat-sidenav [mode]="'side'" #sidenav>sidenav sidenav sidenav</mat-sidenav>
<mat-sidenav-content>
<div class="page">
<p><button mat-button (click)="sidenav.toggle()">Open Sidenav</button></p>
<table-sticky-header-example>loading</table-sticky-header-example>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</main>
<footer> footer </footer>
</div>
The block <div class="page"> is responsible for showing the content. This is also the area, which should be scrollable. Inside this container are often placed tables, which have sticky headers (by using position:sticky). Everything is working fine, but i can't find a way to add some space (margin/padding) between the sticky header of the table and the header of my layout without having trouble either with scrollbars or a visual bug.
I've made a little stackblitz, which shows my current implementation/tries:
Layout without margin or padding
Layout with margin (scrollbar get pushed away from most right position)
Layout with padding (adds transparent gap between sticky table header and layout header)
My Questions are:
Is there a way to add space to my block <div class="page"> container, so that there will be a gap between my sticky table header and my layout header?
Can i prevent my scrollbars to get pushed away from the right most position, when i use margin? (padding doesn't work, because the space is transparent, so that my sticky header "floats")
Thanks in advance for every tipp or hint!
Maybe a: 'border-top: solid 1rem #ccc;' and some padding top and bottom in 'th' will visually fix it
Go with the "layout padding" option and simply set the sticky elements top to 0 - padding-top value set on the parent, top: -1rem; in this case. This will remove the transparent gap but will also remove the spacing when the element is stuck. If you want to keep the spacing when stuck, look into creating a pseudo-element with the same color background as the table or maybe adding margin-bottom or a border to the header.
Related
Can anybody explain why no background color is displayed in the outermost div in the space of the inner div's margin?
<div style="background-color:yellow;">
<div style="margin-top:10px;background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
Divs are block elements, but they take up no space on their own (other than creating a line break) so your inner div is filling all available space within the outer div, masking the yellow background. Add some padding to the outermost div and you will see the yellow.
This is known as "margin collapse".
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
As found in other answers, adding padding or border to the parent will prevent the margins collapsing.
I also had success applying the following CSS to the container, based on tarkabak's method described here. (Please note limited browser compatibility of :before and :after.)
.prevent-margin-collapse:before,
.prevent-margin-collapse:after
{
content: "\00a0"; /* No-break space character */
display: block;
overflow: hidden;
height: 0;
}
<div style="background-color:yellow;" class="prevent-margin-collapse">
<div style="margin-top:10px;background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
http://jsfiddle.net/yCHkW/
In addition to the other answers: This is a matter of collapsing margins. The section "Collapsing Margins Between Parent and Child Elements" should apply in this specific case.
Update: Here's a statement regarding this topic taken directly from the box model specification of CSS3 (you can find almost the same sentence within the CSS2 specification as well):
Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them.
To achieve what you want to see change your html as followed:
<div style="background-color:yellow; padding-top:10px;">
<div style="background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
The reason is that the outer div has no width set and just takes the size of its content.
I would imagine it has something to do with not inheriting any properties from elsewhere.
<div style="background-color:yellow; position: fixed;">
<div style="margin-top:10px;background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
http://jsfiddle.net/rJ3HG/
I am stuck and hope someone has an easy solution I've not thought about :-)
I have a 1040px centered div for page content, menu and footer.
The header image shall have the same left margin as the content div AND grow to the right side (for those with higher screen resolutions)
Is there any way to do this using CSS? I know, I could calculate the left margin of the content box with javascript and set the header-margin dynamically, but I would prefer a css solution.
Regards,
Martin
Why not just place the header outside of the sitecontainer?
And then giving it a width of 100%, and a min-width of 1040px.
(Or stretch the background image, depending on if it's 1 color, or an image.)
Is that what you meant? Maybe post the HTML and the CSS, by the way.
Alright, so what you mean is that the header does stretch across, but that the content inside the header (a menu, a logo, whatever) doesn't get centered like the sitecontainer.
If that's the case, here's what to do;
<div id="header">
<div id="headercontent">
<img src="logo.png">
<nav>
<ul>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
</ul>
</nav>
</div>
</div>
And for the style something like;
#footer{
width: 100%;
min-width: 1040px;
color: [your header color];
}
#headercontent{
[in here you simply put the same styling as the sitecontainer]
}
Is that what you meant? I hope it helped.
I'm trying to solve a scrollbar problem.
I had the problem that I wanted to have three divs aligned vertically and that the middle one will have the space left of the footer and the header
This post helped me with this part: Middle div with 100% in CSS?
The things is that I need that the content div (the middle div) show a scrollbar when the content overflows the middle div space.
Now I have this: http://jsfiddle.net/rv4XS/31/
<body>
<div id="wrap">
<div id="container">
<div id="header">header
</div>
<div id="content">data<br/>
data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
</div>
</div>
</div>
<div id="footer">footer
</div>
</body>
Thanks for the help.
EDIT 1: Only firefox and chrome, No IE.
EDIT 2: Maybe I'm not explaining well my question: I have a header that has variable height based on the content it has, the footer has a fixed height. Now, knowing that the header has a variable height and that the footer has a fixed height, how can I make a middle div (content div) that takes all the space left by the footer and the header?
If the header increases its height a lot ... what will happen is that the middle div will not be visible but only the header and the footer. of course the idea is that if the middle div has some data inside and it is cropped, it has to show the scrollbar.
You can give #content as below :
Note : cannot give % as you gave.Then It Occupied whole height and width which the content has.
Correct One
#content {
width:100%;
height:100px;
overflow: auto;
}
I have updated JSFIDDLER
I am trying to create header , footer and a side bar that extends throughout the content but I am having problem. I have jsfiddle. but I am unsuccessful creating sidbar that is equal and with the containt in height.
See this answer. The user suggests that you give a large bottom padding and a negative bottom padding of the same amount for the sidebar and main divs. Put a container around your sidebar and main div and hide the overflow in it.
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
Hey now define your sidebar and content bar
width in %
as like this
live demo http://jsfiddle.net/zAYru/5/
I have a div (sub area of page with scroll bar) that has some text, an image and a table.
The background color defined for the div -
<div style="background-color: white">
does not fill the area to the top, the top arrow of the scroll bar is above the area filled with the background color (by about the width of one line). Adding a br at the top fixes it, but moves stuff too far down.
I read two potential solutions. One suggested I set a fixed height for the div. That would require changing the height by trial-and-error every time I changed the content of the page. Next. The other suggestion said to add this at the end, just before the /div -
</div>
<div class="clear"></div>
</div>
but that has no effect.
There are several different pages that get loaded into the scrolling area, using SSI's, and some of those included pages use divs, and some of those are floats and some absolutes.
Thanks for any help.
EDIT
Adding the following, which I didn't realize was needed with the "clear", still doesn't work
<style type="text/css">
.clear {
clear:both;
height:1px;
overflow:hidden;}
</style>
Ad
I just wrote this up and it seems to keep the background color no matter how much content you put in it...
<div style='background:#abc;overflow:auto;'>
<p>a bunch of content goes here</p>
</div>
you can, of course, set a height to that but more likely it would be in some div wrapper...