Setting height: 100% for <div> .ui in the HTML below does not work even though all the parent elements have height set to 100%.
Could this be because I'm using <core-header-panel>? I checked its code but I don't see anything that would override the height.
Could this be due to using the layout horizontal attributes?
The layout attributes (built on top of CSS Flexbox) and core-header-panel are part of Polymer.
This is the HTML (simplified):
<!doctype html>
<html>
<body unresolved>
<core-header-panel>
<div layout horizontal class="container">
<div class="ui"> </div> <!-- this does not take up 100% of
the height -->
<div flex class="items"> </div> <!-- this has content inside it which fills
the height, but the <div> itself doesn't -->
And this is my CSS (simplified):
html, body {
height: 100%;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.container {
width: 100%;
height: 100%;
}
.ui {
height: 100%;
position: relative;
margin: 30px;
}
.items {
display: inline-block;
height: 100%;
margin: 30px;
}
Any help would be appreciated.
EDIT 1: Using DevTools I noticed that <core-header-panel> does take up 100% of the height, but <div> .container does not. height: 100%; is not crossed out for .container in the "Styles" tab in DevTools.
EDIT 2: INFO ON POLYMER Here is a link to a simple explanation of Polymer layout attributes and here is a link to some information on core header panel. There are Github links on the top right of both pages.
The solution was actually really simple.
I had to add fullbleed vertical layout to <core-header-panel>. fullbleed forces it to take up the entire height of the parent. I didn't see a reason for this since I specified height: 100%, but it appears that it does not work without it.
I also added fit to <div> .container to make it fit the parent.
<!doctype html>
<html>
<body unresolved>
<core-header-panel fullbleed vertical layout> <!-- added "fullbleed vertical layout" here -->
<div fit layout horizontal class="container"> <!-- added "fit" here -->
<div class="ui"> </div>
<div flex class="items"> </div>
Related
I've come across a problem while building a website; it is that some items go out of the screen.
Following is a simple code that demonstrate the problem. Here, the div with an id of name-h is the element that disappears:
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
height: 100%;
}
#name-h {
font-size: 34px;
margin-bottom: 450px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="container">
<div id="name-h">
<p id="first-name">FirstNmae</p>
<p id="last-name">LastName</p>
</div>
<div id="links">
<p class="link">Resume</p>
<p class="link">Portfolio</p>
<p class="link">Blog</p>
</div>
</div>
</body>
What is the cause of this problem?
How can I fix it?
Edit 1
It turned out that I had provided some false conclusions in the original question, so I edited the question to remove them.-
Edit 2 (Important Clarification)
What I know is that html increases in height in order to contain its elements, and when its height becomes greater than the screen, scrollbars appear, right? Why doesn't this happen in my case? Why even I am assigning height: 100% to html, body, and #container?-
Edit 3 (Is flexbox the reason?)
strong textI think that the flexbox might be the cause of the problem: If only we remove display: flex; from the code above, every thing works as expected. I am thinking that the flexbox might be behaving like an absolutely positioned element, which causes its items to go out of the screen. What do you think?-
Edit 4
Here is a demonstration for the case with dummy text: link. Note that the actual text starts with "Lorem ipsum dolor sit amet, consectetuer adipiscing elit", while the text displayed starts with something else due to the problem.-
Edit 5
I am using html, body { height: 100%; width: 100%} and #container {height: 100%;} in order to center the contents of the flex relative to the whole viewport, not only to the flex itself.
You have declared the height of container which is also a flexbox here height:100%; and given a margin-bottom:450px; to your inner div #name-h
This is possibly causing the issue. Try changing the height of container with height:auto;
Hope this help.
You don't need to specify height: 100%; in html or body. The width is by default 100% and the height varies according to the content inside.
You can solve your issue by removing html, body { height: 100%; width: 100%} and more specifically html{ height: 100%;}.
You shouldn't style html viewport dimensions using css since it could break your code. It is good practice to style your div tags and not your html tag.
Here is the link.
I would try setting flex-flow: column wrap; in container. Either this give the container a width. I love flex-box but sometimes as with any relationship it will occasionally drive you crazy
Adding a wrapper div around the #container div prevents items from going out of the browser window. However, #container items are not still centered relative to the viewport.
Here is the modified code:
html,
body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
height: 100%;
}
#name-h {
font-size: 34px;
margin-bottom: 450px;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div> <!--The only new div-->
<div id="container">
<div id="name-h">
<p id="first-name">FirstNmae</p>
<p id="last-name">LastName</p>
</div>
<div id="links">
<p class="link">Resume</p>
<p class="link">Portfolio</p>
<p class="link">Blog</p>
</div>
</div>
</div>
</body>
Flex-wrap property can solve this issue. Use it like this:
flex-wrap: wrap
I have a header and a long scrollable content. I'd like the header to not be scrollable. I tried setting overflow: hidden to the header but without success.
How can I get the header out of the scroll area?
Snippet:
<body>
<div style="overflow: hidden">Header</div>
<div style="overflow: scroll">Content - very long Content...
See a Plunker with this code.
I also tried setting styles in the body - without success.
I know there's a way to make the header fixed using position fixed, but I don't want to use it because it requires to know the height of the header in advance (for the margin). This requires size duplication and if the header is more complicated, it requires computation.
Found the flex magic.
Here's an example of how to do a fixed header and a scrollable content. Code:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Holy Grail</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<div style="flex: 1; overflow: auto">
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
</body>
</html>
For a full Holy Grail implementation (header, footer, nav, side, and content), using flex display, go to here.
Remove your inline styles first.
Then add this css.
html , body {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow: scroll;
}
https://jsfiddle.net/sthsuuec/11/
I creating an new layout for a personal website.
I'm using Twitter Bootstrap 3, and my initial layout was made using as exemple
the "Bootstrap with sticky footer" sample (http://getbootstrap.com/examples/sticky-footer-navbar/)
This is my html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
The Sticky Footer CSS:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
And the custom style for my layout:
body {
/* Body's background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I'll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
This code generate this layout:
But, as you can see, the div #main-container don't grow 'till the end of the layout.
The div keep with the height of his content.
What I want is that this div always fills the entire page, like this:
Many solutions on internet said me to fix min-height to some tested value, but this way
I'll not be able to keep my website responsive (it's very important to me keep my layout
always responsive, that's the main reason I use Bootstrap 3).
Other solution goes to calculate the div height with javascript. Personally I don't like
this solution. I whish I could solve this only by using CSS.
Someone knows how to solve this problem?
As long as you are working on percentage, your site will be responsive. So using
min-height:100% does solve your problem which is just CSS. And if you don't want Javascript involved here, that is the way to go.
See the JS Fiddle DEMO. Your container is filling the entire page.
#main-container {
min-height: 100%;
background: #fff;
}
If you want to have sticky footer AND fullheight #main-container, you have to modify your structure. First, let me explain why you can't solve this with the sticky-footer method you're using right now:
Setting #main-container's height:100% or min-height:100% won't work because you can't use percentage height with a parent whose height is not strictly defined. Note that in the currently accepted answer this is considered a bug but it is not, it's just the way it is supposed to work. In your example #wrap's height is set to auto, so #main-container height just ignores the 100% and fallsback to auto.
To have both sticky footer and REAL fullheight #main-container (instead of faking with background) you have to use display:table and display:table-row. This works because when you use display:table, height:100% works just as your regular min-height:100% and the display:table-rows inside will always stretch to use all the vertical space available.
NOTE: this is different from using html tables, because in this case you don't need to bloat your markup with non-semantic tags, as you'll see in the following example.
Here's the example HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="maincontainer" class="astable">
<div id="header" class="astablerow">
header
</div>
<div id="middlecontainer" class="astablerow">
content
</div>
<div id="footer" class="astablerow">
footer
</div>
</div>
</body>
</html>
And here's the CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.astable{
display:table;
height:100%;
table-layout:fixed;
width:100%;
}
.astablerow{
display: table-row;
}
#header{
height:30px;
background-color:#00ff00;
}
#footer{
height:30px;
background-color:#0000ff;
}
#middlecontainer{
background-color:#ff0000;
}
I think that min-height doesn't work due to a reported bug. See this: stackoverflow.com/questions/8468066.
An easy way to create the illusion that #main-container grows till the end, is to set #wrap's background-color the same value as #main-container's.
Everyone this is my first post, so I hope I did it right.
I am facing a problem where I have child divs that need to be the same width. The #content can be bigger than the browser window (hence the 3000px, but won't always be bigger than the browser window). Currently #content is shown properly and I can use the scrollbar to see the entire #content, but #messages and #menu are cut off at the width of the browser window.
I have tried using width: inherit and several other options, but they didn't work. Does anyone else have a working solution?
I have created a JSFiddle to make life easier http://jsfiddle.net/Ks665/
I have added a screenshot of the probleem:
The red and green must become as long as the blue div.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</body>
<html>
CSS:
#import url('reset.css');
body {
min-width: 990px;
}
#messages {
height: 100px;
background-color: red;
}
#menu {
height: 100px;
background-color: green;
}
#content {
background-color: blue;
height: 250px;
width: 3000px;
}
You could try wrapping them inside another DIV, and specify the width on there; the child DIVs will automatically fill to the width of the parent:
<div id="container">
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</div>
And then apply the width to the container DIV instead of to 'content':
#container {
width: 3000px;
}
The reason it isn't working in your example is because the DIVs are children of the body tag, which has a minimum width specified, but nothing explicitly defined like I've shown above.
I'm trying to create a site very much like in this picture:
Layout Image on Dropbox
The Problem:
I need the site to scroll horizontally, as suggested in the image.
I also need the vertically scrolling elements to scroll, but inside the element itself, not the entire site. When I scroll up/down in the first frame of the site, it scrolls down to a blank area because the second frame is so tall and forces the entire site to be as tall as the tallest element.
HTML structure:
div #horizontal-container
div #horizontal-wrapper
div #section-1 .section
div #section-2 .section
div #section-3 .section
so on...
CSS:
html, body {
overflow: hidden;
}
#horizontal-container {
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
overflow-y: hidden;
overflow-x: scroll;
}
#horizontal-wrapper {
width: 400%;
height: 100%;
}
.section {
width: 25%; /* A quarter of its parent with 400%, to be 100% of the window. */
height: 100%;
float: left;
overflow-y: scroll;
}
Hopefully I made it clear here. What am I missing to get this working? Should I maybe incorporate a little JavaScript to toggle the overflow property of the container when I hit certain horizontal scroll points? That sounds messy. :/
height=100% will not introduce scroll to sections
You have to assign different heights to sections based on there content.
Check by javascript If height of section is more than window height then assign window height to the section height.
You can try this code to generate fixed width content blocks with horizontal scroller. You can see the parent post here
<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<!-- more boxes here -->
</div>
</div>
</body>
</html>