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;
}
Related
I have a square block of 100*100px, there is a container block that may be resized. I want to resize the inner block so it always be inside the parent without overflow and always square (to be resized dynamically)
Note: I want to maintain the square shape of the inner div
#child {
height: 100px;
width: 100px;
background-color: red;
}
#par {
height: 200px;
width: 200px;
border: 2px solid black;
}
<div id="par">
<div id="child">
</div>
</div>
If you want an element to be a square (ratio of 1:1) then just add padding-bottom: 100% to it. If you want that square to have content then the inner content of that square must be absolutely positioned.
body { width: 200px; }
.square {
padding-bottom: 100%; /* 1:1 aspect ratio (square) */
border:1px solid red;
position: relative;
}
<div class="square"></div>
You can place the square in a container/parent but you did not say how overflowing should behave?
.parent {
height: 200px;
width: 80%;
border: 1px dashed black;
}
.square {
padding-bottom: 100%; /* 1:1 aspect ratio (square) */
border:1px solid red;
position: relative;
}
.square .inner {
position: absolute;
top: 0; left: 0;
width: 100%;
overflow: auto;
}
<div class="parent">
<div class="child square">
<div class="inner">responsive square 1:1</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/mheoqbnw/
what you want is this:
http://marcj.github.io/css-element-queries/
element-queries, the future
Just give the #child element a max-height and max-width of 100%:
#child{
height:100px;
max-height:100%;
width:100px;
max-width:100%;
}
Try this
#par{
width: 200px;
height: 200px;
border:2px solid black;
overflow: hidden;
}
#par #child{
position: relative;
width: 50%;
height: 50%;
margin: auto;
margin-top: 25%;
background-color:red;
}
http://jsfiddle.net/voj2wsyb/
Give the child min, max and height 100% it's going to look to it's parent and with 100 % it's taking the same height
Here you are :-
.child
{
height:100px;
width:100px;
background-color:red;}
.par
{
position: relative;
height:200px;
width:200px;
border:2px solid black;
}
.par:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.par > .child{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<html>
<body>
<div class="par">
<div class="child">
</div>
</div>
</body>
</html>
If it helps, mark the problem solved.
I use EQCSS, an element queries plugin that lets me grab values from JavaScript to use in my CSS. Here's a demo with a column 33% wide that has a square that will resize responsively inside it:
<section>
<div></div>
</section>
<style>
section {width: 33%;}
#element 'div' {
$this {
width: auto;
height: eval("clientWidth")px;
background: red;
}
}
</style>
<script src=http://elementqueries.com/EQCSS.js></script>
In this snippet, the width: auto means it expands to fill its container. The eval('clientWidth') is inside of the element query, so it refers to this.clientWidth where the this is the element that matches the query. This means the height of our square will always be equal to its width! (a square).
Check it out: http://elementqueries.com
I also use this same technique to allow me to resize Youtube and Vimeo iframes according to their aspect ratio without needing a wrapper:
#element 'iframe' {
$this {
margin: 0 auto;
width: 100%;
height: eval("scrollWidth/(width/height)")px;
}
}
Responsive video scaling demo: http://elementqueries.com/demos/video-scaling.html
Hope this helps!
There is now the CSS attribute aspect-ratio:
body { width: 200px; }
.square {
border: 1px solid red;
aspect-ratio: 1 / 1;
width: 100px; /* <-- optional, this is only for the demo */
}
.not-a-square {
border: 1px solid green;
aspect-ratio: 2 / 1;
width: 100px; /* <-- optional, this is only for the demo */
}
<div class="square"></div>
<div class="not-a-square"></div>
Support: https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes
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!
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>
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 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.