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!
Related
Why don't #img1 and #canvas1 fully overlap in the below code? I want them in exactly the same place. I'm layering images with JavaScript animation on canvas. Initial thoughts were that the padding or margin default settings were interfering somewhere. I've tried setting to zero for all elements - it doesn't work. I understand that position:relative positions an element relative to it's normal position. Clearly missing a default setting or something obvious.
<!DOCTYPE html>
<html>
<head>
<style>
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: relative;
left: -50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<img src="" id="img1" />
<canvas id="canvas1"></canvas>
</div>
</div>
</html>
Two things to do:
1.) Don't leave a linebreak or space between the two elements in the HTML code (see below)
2.) Set the left setting for canvas to -52px - you have to consider the 2 x 1px border of the image.
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: relative;
left: -52px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<img src="" id="img1" /><canvas id="canvas1"></canvas>
</div>
</div>
A couple of remarks:
use box-sizing: border-box for 'easier' sizing. With border-box the border width and padding are substracted from the elemenent istead of added on to it. An element with width: 100px, a border-width of 1px and a padding of 10px will be 100 + (2 * 1) + (2 * 10) = 122px wide without box-sizing: border-box but the element will be 100px wide even with the border-width and padding when the box-sizing is set to border-box. See here for a (better) more detailed explanation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
When trying to overlap element I find it easiest to keep the surrounding container element as empty as possible. Taking out the h1 element makes overlapping a lot more manageable.
Change the position of the canvas element to absolute. This way it no longer takes up place in the DOM and it is positioned in the upper left container of its positioning parent (in your example the div.chapter in my answer the div.container). This also helps when trying to have elements line up.
* {
box-sizing: border-box;
}
.container {
position: relative;
}
.chapter {
width: 90%;
margin: 0 auto;
max-width: 1000px;
border: 1px solid red;
}
#img1 {
border: 1px solid green;
position: relative;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
#canvas1 {
border: 1px solid blue;
position: absolute;
left: 50px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
<div class="template" id="T2">
<div class="chapter" id="C2">
<h1>Why can't I overlap the below elements?</h1>
<div class="container">
<img src="" id="img1" />
<canvas id="canvas1"></canvas>
</div>
</div>
</div>
#img1 {
border: 1px solid green;
position: relative;
left: 56px;
height: 100px;
width: 100px;
margin: 0px;
padding: 0px;
}
this worked...
There are certainly better ways to achieve the effect you're going for but to answer your question, I believe the spacing is being caused by the default font size on the parent element. Set the font size to 0px on the chapter div and you can see the elements now overlap each other.
I have an odd reflow issue, in Chrome.
When I resize the browser's height, the two divs at the top and bottom of the pink div don't get their width updated, unless I'm doing an ugly timeout workaround where I hide and show the container (I don't like that workaround). This works in FF and Safari, so it's a Chrome bug.
One important requirement is that the pink middle div dictates the size of the parent div because it's a video and I need to show it in full height, without specifying the width.
Is there a way to fix this issue without doing ugly JS workarounds?
HTML:
<div class="video-wrapper">
<div class="header"><div class="left"></div><div class="right"></div></div>
<div class="video">
<span>1</span>
<video></video>
</div>
<div class="footer"><div class="left"></div><div class="right"></div></div>
</div>
CSS:
.video-wrapper{
display: inline-block;
height: 100%;
}
.video-wrapper .header,
.video-wrapper .footer{
width: 100%;
height: 8px;
border: 1px solid;
}
.video-wrapper .video{
height: calc(100% - 16px);
}
.video-wrapper video {
height: 100%;
border: 1px solid pink;
}
.video-wrapper span{
position: absolute;
top:20px;
left:0;
}
Here is a JSFiddle with the reproduction: https://jsfiddle.net/7o27qkpx/3/
I think i have understood your requirement and based on that i have edited your Css, please replace this with your css and let me know if this is fine and if yes i will explain the code and if not then can you please clarify your requirement more precisely.
Edited Css :
.video-wrapper{
display: block;
height: 100%;
position: relative;
}
.video-wrapper .header,
.video-wrapper .footer{
width: 100%;
height: 8px;
border: 1px solid;
}
.video-wrapper .video{
height: calc(100% - 16px);
width: 100%;
}
.video-wrapper video {
height: 100%;
border: 1px solid pink;
width: 100%;
}
.video-wrapper span{
position: absolute;
top:20px;
left:0;
}
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 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>
I know that IE6 is obsolete but my customer still uses IE6.
This project's content segment must be a percentage scale, but when the content's height is very long and user decides to minimize the browser, the content segment jumps to the bottom of side bar.
My code when dashboard_content with longer content
CSS code:
#outer-box {
width:100%;
height: 100%;
position: relative;
overflow: auto;
float: right;
}
#inner-box-1 {
width: 225px;
height: 100%;
background-color:#253740;
float:right;
}
#inner-box-2 {
height: 100%;
direction: rtl;
overflow:auto;
*overflow: inherit;
}
.header {
width: 100%;
height: 100px;
background: url('imgs/pattern.jpg') repeat-x;
}
.dashboard_main_menu_holder {
width: 100%;
height: 50px;
background-color: #fff;
border-bottom: 1px solid #d0d0d0;
}
.dashboard_content {
width: 98%;
margin: 10px;
}
HTML code:
<div id ="outer-box">
<div id="inner-box-1">
<div class="user_image"></div>
</div>
<div id="inner-box-2">
<div class="header"></div>
<div class="dashboard_main_menu_holder"></div>
<div class="dashboard_content"></div>
</div>
</div>
How can i get this fixed in IE6?
Change the %s on the CSS to the amount of px. You can find more information on this link.