I'm using a WebView in my android application and I have an interface that should (otherwise) be simple to design, but due to the issue with percentile based height not working I'm running into some issues.
The device should not have any scrolling and I need to lay the page out with certain elements containing a certain percentage size in the screen. Here's my CSS.
#container {
width: 100%;
height: 100%;
overflow: hidden;
border: 5px solid green;
}
#header {
width: 100%;
height: 60%;
border: 1px solid blue;
}
Now with the following HTML
<div id="container">
<div id="header">...</div>
</div>
I should have a container that takes up 60% of the screens height, correct? That would only make sense because the parent container takes up 100% of the screens height. This is absolutely essential to my applications completion and my goal was to be done by tomorrow and this is my last interface that requires being designed.
Thanks for any help.
NOTE:
I've also tried this:
#container {
width: 100%;
height: 100%;
border: 5px solid blue;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#header {
position: relative;
top: 40px;
left: 0;
width: 100%;
height: 60%;
border: 1px solid black;
}
Picture:
By default, html, body tags have height: auto, so it makes sense to style them first, just add full height for both
html, body{
height: 100%;
}
/*as this class is parent of #container, is also must have full height*/
.main-view{
height: 100%;
}
#container {
width: 100%;
height: 100%;
overflow: hidden;
border: 5px solid green;
}
#header {
width: 100%;
height: 60%;
border: 1px solid blue;
}
<div class="main-view">
<div id="container">
<div id="header">
</div>
</div>
</div>
Related
I want to use position: absolute to create a centered element, but it will create a horizontal scrollbar on Internet Explorer 11. Please see the script below. Anyone here knows how to fix this problem?
*Update: I figured out that using overflow:hidden seems to solve this problem somehow. But when there are another one outside of the container, it will be hidden as well.
.container {
width: 80%;
margin: 0 auto;
height: 100vh;
border: 1px solid green;
position: relative;
overflow: hidden; /*This one is not the solution, though*/
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, 0);
border: 1px solid red;
}
.another-content {
width: 40px;
height: 40px;
border: 1px solid blue;
position: absolute;
bottom: 20px;
right: -20px;
}
<div class="container">
<div class="content"></div>
<div class="another-content"></div>
</div>
You need to add following properties with the position absolute in IE
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0; //specify all including bottom:0
The scrollbar show up in all browsers, not only IE. You can do the following:
The biggest issue is that the left: 50% and width: 80% together are adding to the total width and forcing the horizontal scrollbar to show up in some browsers (e.g. Internet Explorer and MS Edge). You set the width to 80%, so divide the remaining 20% between the left and right border and you'll end up with 10% each. Simply use left: 10% to achieve the same result, but without the side effect of the horizontal scrollbar.
Also when you set the size to 100% and then add border, those borders will be out of the view and cause the scrollbars to show up. This is the same in all browsers. Use box-sizing: border-box to force the browser to include the border in the height and width calculation.
The height: 100vh makes the box height equals to the view port. However, the body has default margins which vary from one browser to another. You can either set those margins to zero body { margin: 0; }, or change the height to height: 100% which is 100% of the container which the body in this case.
Try this:
.container {
width: 100%;
height: 100%;
border: 1px solid green;
position: relative;
box-sizing: border-box;
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 10%;
border: 1px solid red;
}
<div class="container">
<div class="content"></div>
</div>
Thanks for your replies. Though they are not direct solution, they helped me a lot to figure out how to solve it.
The cause is as what Racil Hilan said. When I use left:50% and width:80%, the content width will be added up and create a horizontal scroll, which is not ignored by only IE. And my point is to avoid creating that added-up width. Here is my two way to workaround this one.
* {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
border: 1px solid green;
position: relative;
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 0;
right: 0;
border: 1px solid red;
margin: 0 auto;
}
.content-wrapper {
border: 1px solid black;
height: 30px;
position: absolute;
top: 100px;
left: 0;
right: 0;
}
.another-content {
width: 80%;
display: block;
height: 100%;
border: 1px solid red;
margin: 0 auto;
}
<div class="container">
<div class="content"></div>
<div class="content-wrapper">
<div class="another-content"></div>
</div>
</div>
I have a web page index2.html whose height is 100%. It has 3 div: 1st one's height is 20%, 2nd one's height is 70% and 3rd one's height is 10%.
This is its whole HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html, body {
height: 100%;
}
#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}
#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}
#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
</body>
</html>
When I display the web page on a browser (IE 11 and Chrome), a vertical scroll bar is showing up. I dont understand why there is a vertical scroll bar when the height of page is 100% set and the sum of height of 3 div (20% + 70% + 10%) is also 100%. Why this is happening? How can I fix this issue?
html, body {
height: 100%;
}
#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}
#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}
#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
JSFIDDLE
For two reasons
The body has a default margin that you'd need to eliminate with body {margin:0}
The the other issue is that your borders factor into the size of your elements and increase the height. You can fix this by adding div {box-sizing:border-box}
jsFiddle example
Your problem in your example was the body margin (default in most browsers) and the borders which made the divs width 100% + 2 pixels (border on left and right) and the height was affected the same way.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#div_header {
width: 100%;
height: 20%;
background-color: blue;
}
#div_middle {
width: 100%;
height: 70%;
background-color: red;
}
#div_footer {
width: 100%;
height: 10%;
background-color: green;
}
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
EDIT:
And yes you could also set box-sizing:border-box; in your css to fit the borders in the 100% div. This along with setting margin: 0; to your <body> element would be the correct way to go in fixing your issue.
You can also read about box-sizing here
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}
#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}
#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
In my case,
* {
overflow: hidden;
}
This worked.
The reason for the scroll bar is because you are not accounting for the box model. The percentages do not account for margin, or borders. So by adding a 1 px border and not removing the margins, the percentages will make the boxes slightly taller the the view screen.
Try this.
*{
margin: 0;
}
html, body {
height: 100%;
}
#div_header {
width: 100%;
height: 20%;
background-color: #23408;
}
#div_middle {
width: 100%;
height: 70%;
background-color: #444;
}
#div_footer {
width: 100%;
height: 10%;
background-color: #123854;
}
I'm building a responsive site which utilizes CSS3 function calc. The basic idea is to keep the structure intact height-wise when window height is changed. The div with class "componentContent" should always alter its size according to surrounding elements. When the contents inside this div overflows, a scrollbar should appear and contents become scrollable.
With Firefox this structure works flawlessly and with Chrome it's not as fluent but still works. The problem is with IE (tried with version 11). With IE calc function doesn't seem to work and "componentContent" div is not altering its height according to window height.
I'm also looking for other ways of implementing similar structure and functionality. If someone has an idea how to improve this solution or do it in a totally different way, I'm listening!
The stucture is seen below:
<html>
<body>
<div class="menu">
</div>
<div class="container">
<div class="content">
<div class="componentHeader">
Component header
</div>
<div class="componentContent">
<div style="height: 150px;">
contents...
</div>
</div>
<div class="componentFooter">
Component footer
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
And the CSS looks as follows respectively:
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
body * {
box-sizing: border-box;
}
.menu {
width: 100%;
height: 100px;
border: 2px solid black;
}
.container {
width: 100%;
height: calc(100% - 100px);
border: 2px solid blue;
position: relative;
}
.content {
width: 100%;
height: calc(100% - 50px);
border: 2px solid green;
}
.componentHeader {
height: 50px;
width: 100%;
border: 5px dotted black;
}
.componentContent {
height: auto;
width: 100%;
border: 5px dotted black;
top: 0px;
overflow-y: auto;
max-height: calc(100% - 100px);
}
.componentFooter {
height: 50px;
width: 100%;
border: 5px dotted black;
}
.footer {
width: 100%;
height: 50px;
border: 2px solid red;
position: absolute;
bottom: 0px;
}
JSFiddle of the situation: https://jsfiddle.net/Visa/ufnzwdce/11/
P.S. if someone has a better implementation for this situation, please let me know!
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
I am trying to make a 3-column layout but as you can see from the screenshot below the left-most and right-most columns don't span all the way down:
You can find the code at http://codepen.io/vbelenky/pen/hvbEq and I'm going to paste it here, too:
<div class="wrapper">
<div class="primary">
<div class="primary-left">
Primary Left<br>
blah
</div>
<div class="primary-right">
Primary Right
</div>
</div>
<div class="secondary">
Secondary
</div>
</div>
CSS:
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
}
.secondary {
width: 200px;
float: left;
background: cyan;
}
.primary {
width: 400px;
float: right;
}
.primary-left {
width: 300px;
float: left;
background: grey;
}
.primary-right {
width: 100px;
float: right;
background: yellow;
}
HTML :
Use follow code that is similar to your query :
<div class="mainDiv">
<div class="left">Left</div>
<div class="center">Center</br>Center<br/>Center<br/></div>
<div class="right">Right</div>
</div>
CSS :
.mainDiv{ position: relative; height: auto;}
.left{ position: absolute;background:red; left: 0; top: 0; width: 100px; height: 100% }
.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px;height: 100%; }
.center{ margin: 0 100px;background:green; }
http://jsfiddle.net/pfqpR/
Like monkhan said, you'll need to set heights for all of the elements, for example (see on CodePen):
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
height: 40px;
}
.secondary {
width: 200px;
float: left;
background: cyan;
height: inherit;
}
.primary {
width: 400px;
float: right;
height: inherit;
}
.primary-left {
width: 300px;
float: left;
background: grey;
height: inherit;
}
.primary-right {
width: 100px;
float: right;
background: yellow;
height: inherit;
}
The downside of this approach is that you'll need to know what the maximum height is ahead of time (in this case, I picked 40px).
One way to approach this is with absolute positions (instead of floats). It doesn't fit to all needs, but it may fit yours.
http://codepen.io/anon/pen/lLngy
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
position: absolute; top: 0; left: 0; bottom: 0;
}
.secondary {
width: 200px;
background: cyan;
position: absolute; top: 0; bottom: 0;
}
.primary-left {
width: 300px;
background: grey;
position: absolute; top: 0; left: 200px; bottom: 0;
}
.primary-right {
width: 100px;
background: yellow;
position: absolute; top: 0; right: 0; bottom: 0;
}
One approach that wouldn't require you to set any pre-determined heights would be to apply a 3-colour background image to the wrapper (image height can be 50px and "repeat-y").
This way you will have the background colours of the inner divs repeating all the way down to the bottom and it won't matter which inner div is the tallest.
For example:
.wrapper {
overflow: hidden;
width: 600px;
border: 1px solid black;
background-image: url('3colours.png');
background-repeat: repeat-y;
}
Others said it well. I am just showing another possible way(inconvenient). Inconvenient because it makes the width changing more difficult. Just a background image hack. Use a background image of (wrapper width x 1)px for the .wrapper with colors at appropriate positions. Also remove the background color styles from .secondary, .primary-right and .primary-left.
Here is the fiddle: http://jsfiddle.net/eY9VR/
My coworker gave a solution. The main idea is not to use float property and use display table and table-cell. Please refer to the code for reference. I had to move div.secondary to the top, I commented out the float attribute everywhere, I've declared div.wrapper as display: table and div.secondary, div.primary-left, and div.primary-right as display: table-cell.