I am developing a page with Angular 2 and PrimeNG Design Framework. While creating a simple layout consisting out of a menu bar and a content part which should be placed below the menu and fill the whole remaining space. But anyhow there is a gap at the bottom as you can see on the picture and I can't explain myself why.
And this is my HTML- Code
#siteContainer {
height: 100%;
width: 100%;
display: table-row;
}
#menuContainer {
display: table-row;
}
#p-tabView {
height: 100%;
}
<div id="siteWrapper" style="min-height: 100%; width: 100%; display: table">
<!-- Top Menu Bar -->
<div id="menuContainer">
<app-skeleton></app-skeleton>
</div>
<!--Container for site content-->
<div id="siteContainer">
<p-tabView id="tabView" orientation="bottom">
<div id="tabPanelContainer">
<p-tabPanel>
<!--tabbody-->
<p-card>
<app-display-widgets style="{border: #7A7A7A 2em solid;}" *ngIf="sheet.id === refreshCurrentSheet()" [dashboardID]="dashboard.id"></app-display-widgets>
</p-card>
</p-tabPanel>
</div>
</p-tabView>
</div>
</div>
Add margin:0 to your html and body tag
<style>
html, body{
margin: 0;
}
#siteContainer {
height: 100%;
width: 100%;
display: table-row;
background: blue;
}
#menuContainer{
display: table-row;
}
#p-tabView {
height: 100%;
}
add this to your code see if that will fix the problem
body {
margin:0;
padding:0;
}
Check if your router outlet is maybe wrapped inside container fluid, and if so either change container's fluid css to your liking or remove the wrapping div/container
Related
I'm using a table layout for my website. It's working in IE and Chrome, even IE 8 perfectly. My entire website is in one table with three cells. The top navbar, the content, and the bottom footer navbar. The table's width and min-height is set to 100%, and the middle cell is set to height: auto. This makes the footer get pushed to at least the bottom of the window, and if there is enough content the footer is painlessly pushed farther along with the content.
But Firefox won't make the middle cell's height fill to reach the table's min-height of 100%.
Here is what it looks like in Internet Explorer and Chrome (working):
but in Firefox the middle cell's height isn't filling (not working):
Here is my CSS:
<style>
#tablecontainer{
width: 100%;
min-height: 100%;
}
.table-panel {
display: table;
}
.table-panel > div {
display: table-row;
}
.table-panel > div.fill {
height: auto;
}
/* Unimportant styles just to make the demo looks better */
#top-cell {
height: 50px;
background-color:aqua;
}
#middle-cell {
/* nothing here yet */
background-color:purple;
}
#bottom-cell {
height:50px;
background-color:red;
}
body {
height: 100%;
margin: 0;
}
html {
height: 100%;
}
Here is my HTML:
<body>
<div id="tablecontainer" class="table-panel">
<div id="top-cell">
<nav>
</nav>
</div>
<div id="middle-cell" class="fill">
<div class="section">
<div class="container">
<p>{{ content }}</p>
</div>
</div>
</div>
<div id="bottom-cell">
<nav>
<p>I'm the footer!</p>
</nav>
</div>
</body>
Here's a fiddle. https://jsfiddle.net/mmgftmyr/ It is completely accurate, the fiddle will work in Chrome and Internet Explorer but not Firefox.
Problem exists in the following styles:
#tablecontainer {
min-height: 100%; /* change min-height to height */
width: 100%;
}
.table-panel {
display: table;
}
min-height: 100% property doesn't work properly with min-height always. Change min-height to height and it will work.
Note: HTML tables have special behavior with height. If you specify height for a table or and element having display: table and its content doesn't fit in then its height will be increased automatically according to the content. So we can always use height instead of min-height with tables.
#tablecontainer{
width: 100%;
height: 100%;
}
.table-panel {
display: table;
}
.table-panel > div {
display: table-row;
}
.table-panel > div.fill {
height: auto;
}
/* Unimportant styles just to make the demo looks better */
#top-cell {
height: 50px;
background-color:aqua;
}
#middle-cell {
/* nothing here yet */
background-color:purple;
}
#bottom-cell {
height:50px;
background-color:red;
}
body {
height: 100%;
margin: 0;
}
html {
height: 100%;
}
<div id="tablecontainer" class="table-panel">
<div id="top-cell">
<nav>
</nav>
</div>
<div id="middle-cell" class="fill">
<div class="section">
<div class="container">
<p>{{ content }}</p>
</div>
</div>
</div>
<div id="bottom-cell">
<nav>
<p>I'm the footer!</p>
</nav>
</div>
</div>
On Firefox, min-height is not interpreted on display: table; instead of using min-height use height:100%;
#tablecontainer{
width: 100%;
height:100%;
}
updated fiddle
I'm making a user-resizable GUI window with a header that gains height through new elements, a footer with static height, and a spacer in between that automatically takes up the rest of the height. I attempted using this answer, but the footer ended up vertically-centered. Picture:
If anyone knows why off the top of their head, it would be greatly appreciated. The element is being added to the page with javascript so the code is pretty messy. Thank you for your time.
What about the following:
<body>
<header class="header"></header>
<main class="spacer"></main>
<footer class="footer"></footer>
</body>
.
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
.spacer {
flex: 1;
}
I still don't know what the issue was, but I made a solution using the css calc() function.
HTML:
<div id="myWindow">
<div id="header">
Header
</div>
<div id="footer">
<div id="subHeaderContainer">
<div id="subHeader">
Sub Header
</div>
</div>
<div id="subFooter">
Sub Footer
</div>
</div>
</div>
CSS:
#myWindow {
width: auto;
height: auto;
resize: both;
border: 2px solid black;
overflow:hidden;
}
#header {
height: 20px;
background-color: grey;
}
#footer {
width:100%;
height: calc(100% - 20px);
}
#subHeaderContainer {
width:100%;
height: calc(100% - 30px);
}
#subFooter {
width:100%;
height:30px;
}
I want to vertically and horizontally center a div using the "table-cell" method because is not requiring a specific height, but unfortunately is not working without specifying a height.
Why is not working ?
I have this markup:
<section class="content-01 v-center">
<div>
<div class="container">
<div class="slogan text-center">
<h1>VERTICAL CENTERING</h1>
</div>
</div>
</div>
and this css:
.content-01.v-center {
display: table;
width: 100%;
}
.content-01.v-center>div {
display: table-cell;
vertical-align: middle;
margin-top: 0;
margin-bottom: 0;
float: none;
}
And here is a jsfiddle
Any ideas what am I doing wrong ?
Thanks!
The problem here is that the html and body tags end before the bottom of the viewport:
At the very least you would have to tell the browser that the height of the html and body elements is at least 100%:
html, body {
height: 100%;
}
As well as specifying a height for the container section:
.content-01.v-center {
/* ... */
height: 100%;
}
Here's an updated fiddle: http://jsfiddle.net/2ntK2/3/
I am making a web page that needs a header (on top) and a left aligned menu (below the header) and content to the right of that menu.
The problem I am facing is that I want to use (with elements and floats) rather than to create the struture of the page however, whenever I resize the browser window the content element floats down under the menu. I want the content to stick to the right of the left floating menu.
Any one got any ideas how I can fix this?
my html code has this structure:
<div id="menu">
menu #1
...
...
...
</div>
<div id="subcontent">
text or whatnot...
</div>
Css file look like this:
#menu
{
width: 200px;
float: left;
}
#subcontent
{
width: 800px;
float: left;
}
PS I have tried changing pixels to % but with no luck.
CSS
#layout {
min-width: 1001px;
}
#menu {
width: 200px;
float: left;
}
#subcontent {
width: 800px;
float: left;
}
.clear-both {
clear: both;
font: 1px/1px monospace;
display: block;
}
HTML
<div id="layout">
<div id="menu"> menu #1 ...
...
... </div>
<div id="subcontent"> text or whatnot... </div>
<div class="clear-both"></div>
</div>
Another solution:
CSS
#layout {
display: table;
width: 1000px; /* set it to 100% if #subcontent width is dynamic */
}
#menu {
width: 200px;
display: table-cell;
}
#subcontent {
width: 800px; /* you can remove the width to make it dynamic */
display: table-cell;
}
HTML
<div id="layout">
<div id="menu"> menu #1 ...
...
... </div>
<div id="subcontent"> text or whatnot... </div>
</div>
You will need an outer container.
Simply try wrapping both elements in a div of width 1000px
<div class="outer">
<div id="menu">
menu #1
</div>
<div id="subcontent">
</div>
</div>
.outer{width: 1000px;}
#menu
{
width: 200px;
float: left;
}
#subcontent
{
vertical-align: top;
width: 800px;
float: left;
}
Is it possible to make the wrapper fill the window height (no scrolling) and the center div scrollable without messing around with pixels and javascript?
<div id="wrapper">
<h1>Header</h1>
<div id="center">
<div style="height:1000px">high content</div>
</div>
<div id="footer">Footer</div>
</div>
Basically I want the header to be visible at the top and the footer to be always visible at the bottom and have a scrollable content in the center which occupies the remaning height.
The header, footer and center divs' heights are all unknown (no set px or %, i.e. variable font-size or padding). Is it possible with pure CSS?
2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It's supported by all major browsers and IE11+.
2012: The correct way to do this with CSS alone is to use display: table and display: table-row. These are supported by all major browsers, starting with IE8. This is not using tables for display. You'll use divs:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow; /* just to make sure nothing bleeds */
}
.header {
display: table-row;
background: gray;
}
.content {
display: table-row; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won't scroll) */
background: turquoise;
}
.footer {
display: table-row;
background: lightgray;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
<p>Header of variable height</p>
</div>
<div class="content">
<h2>Content that expands in height dynamically to adjust for new content</h2>
Content height will initially be the remaining
height in its container (<code>.wrapper</code>).
<!-- p style="font-size: 4000%">Tall content</p -->
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
That's it. The divs are wrapped as you'd expect.
A cross-browser solution derived from Dan Dascalescu answer:
http://jsfiddle.net/Uc9E2
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height-row {
display: table-row;
height: 1px;
}
.l-fit-height-row-content {
/* Firefox requires this */
display: table-cell;
}
.l-fit-height-row-expanded {
height: 100%;
display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
height: 100%;
width: 100%;
}
#-moz-document url-prefix() {
.l-scroll {
/* Firefox requires this to do the absolute positioning correctly */
display: inline-block;
}
}
.l-scroll {
overflow-y: auto;
position: relative;
height: 1000px;
}
.l-scroll-content {
position: absolute;
top: 0;
bottom: 0;
height: 1000px;
min-height:100px;
}
<div class="l-fit-height">
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Header</p>
</div>
</section>
<section class="l-fit-height-row-expanded">
<div class="l-fit-height-row-content l-scroll">
<div class="l-scroll-content">
<p>Foo</p>
</div>
</div>
</section>
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Footer</p>
</div>
</section>
</div>
Using overflow:auto will let you do this.
demo
So what you are talking about is a sticky footer. I went and did some more research and here is what I have for you.
<div id="wrapper" style="height:100%">
<div id="header" style="float:none;"><h1>Header</h1></div>
<div style="overflow:scroll;float:none;height:auto;">high content</div>
<div id="footer" style="clear:both;position:fixed;bottom:0px;"><h1>Footer</h1></div>
</div>
This will give you a sticky footer. The key is position:fixed and bottom:0px;
Unfortunately this means it also hovers above any content in the scrollview. So far there seems to be only Javascript to figure this out but I will keep looking.