I want to achieve some layout with percent setting of height on img element , it performed perfect while first loading, but I found that the img element couldn't spreading the parent element when browser resize.
The width of parent element will still be the former width and will not change after resizing.
How can I fix it without js and with pure css?
here are some example code:
html,body{
width:100%;
height:100%;
margin:0;
}
.container{
height:100%;
float:left;
background:yellow;
}
img{
height:30%;
width:auto;
}
<div class="container">
<img src="http://i.stack.imgur.com/EOYdZ.jpg">
</div>
Am not sure if i understood your question properly but created a codepen script. You can check it here. Added a "width:30%" property
html,body{
width:100%;
height:100%;
margin:0;
}
.container{
float:left;
background:yellow;
}
img{
width:30%;
height:30%;
}
Related
I want to fit a png image to the height of a div that is inheriting its height from another div. I have seen how this can be done by setting the image's max-height to 100% (in questions such as this: How do I auto-resize an image to fit a div container), but this only works for me when the image is directly in the div thats height is specified in pixels.
I have a topbar, whose height I set explicitly, and a logodiv inside that, which inherits the height from the topbar. However, the logo does not resize to fit the height of logodiv unless I explicitly set the height (the commented code).
It seems like bad coding to have to set the height twice, when it should be inherited. Is there any way to fit the image to the correct height without doing this?
css:
#topbar{
width:100%;
height:45px;
}
#logodiv{
float:left;
/* height:45px; */
}
#logodiv img{
max-height:100%;
}
html:
<div id="topbar">
<div id="logodiv">
<img src="images/project/logo.png" />
</div>
</div>
I want to fit a png image to the height of a div that is inheriting
its height from another div.
Technically, logodiv is not inheriting its height from topbar. Its simply expanding itself according to its content(the image in this case).
Try adding the property height:inherit; to second div and you are good to go.
HTML
<div id="topbar">
<div id="logodiv">
<img src="images/project/logo.png" />
</div>
</div>
CSS
#topbar{
width:100%;
height:45px;
}
#logodiv{
float:left;
height:inherit;
/* height:45px; */
}
#logodiv img{
max-height:100%;
}
Fiddle
Try this css:
#topbar {
width:100%;
height:45px;
border:1px solid red;/* for highlighting*/
}
#logodiv {
float:left;
height:inherit;
}
/*To clear float */
#topbar:after {
clear:both;
display:block;
content:""
}
#logodiv img {
max-height:100%;
}
Demo : http://jsfiddle.net/lotusgodkk/4d4L1g0a/
I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container.
Like this the website would occupy at least all the windows in it's height.
My HTML code (a part ^^)
<div id="wrap">
<div id="banner"></div>
<div>
<div id="whoami" class="corpus"></div>
<div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content. I can't pass the footer in absolute position</div>
</div>
<div id="footer"></div>
</div>
The CSS that goes with this
html, body {
margin:0;
padding:0;
background:#fff;
height:100%;
}
#wrap {
background-color:#ff0;
min-height:100%;
width:1000px;
left:50%;
margin-left:-500px;
position:absolute;
}
#banner {
background-color:blue;
height:150px;
width:1000px;
position:relative;
}
.corpus {
width:800px;
min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
margin-left:100px;
background-color:grey;
position:relative;
height:auto;
margin-top:5px;
}
#footer {
height:100px;
width:1000px;
background-color:purple;
position:relative;
z-index:1;
bottom:0;
margin-top:5px;
}
A little Fiddle for the road :http://jsfiddle.net/yoshino78/bn455/1/
Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is
Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.
Demo
Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer
Hi I'm looking to create a 3 column responsive layout where one of the column (sidebar) is in fixed position.
Both sidebars have a width set in percents and also min & max-width properties in pixels.
And I want that the content in the middle to fill all the space between the two sidebars please.
I beleive I can calculate the width of the sidebars using JS but I'm looking for the best approach hopefully using only CSS please.
It needs to support only IE9 not below.
I'm attaching a drawing for better understanding and will appreciate your help.
Tried a JsFiddle. Please see if it's what are you looking for.
Here the html code:
<header>Fixed Header</header>
<div id='container'>
<nav>Navigation</nav>
<article>Article</article>
<footer>Footer</footer>
</div>
<aside>Fixed Aside</aside>
and here the css:
body
{
text-align:center;
padding:0;
margin:0;
}
header
{
height:50px;
background:rgb(200,200,0);
position:fixed;
top:0;
left:0;
width:100%;
}
aside
{
height:50px;
background:rgb(200,0,0);
position:fixed;
top:50px;
right:0;
width:20%;
height:700px;
}
#container
{
margin-top:50px;
}
nav
{
width:20%;
float:left;
height:700px;
background:rgb(200,100,100);
}
article
{
padding-right:20%;
}
footer
{
clear:both;
padding-right:20%;
width:80%;
background:gray;
height:50px;
}
You should try Bootstrap classes, they work perfectly
I have a question which is asked over a thousand times, I spent whole morning reading simulair question but just cant get mine fixed so hope anyone can help me out.
this is my demo: http://jsfiddle.net/skunheal/4qx6a/1/
#one{
width:100%;
min-height:100%;
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg');
background-attachment:fixed;
color:#fff;
}
#two{
width:100%;
min-height:100%;
background-color:transparent;
position:relative
}
#content{
min-height:60%;
position: absolute;
bottom:0px;
background:#ff9900;
}
I have 3 divs, all 100% height the first div (div.one) has a picture which is attached fixed The second div (div.two) has an orange textbox div in it(div.container), which is positioned absolute and bottom:0px so it sticks to the footer of div.two. div.two has a transparant background (its white in the fiddle because I cant seem to set it to transparant)
Now when you start scaling the window you see the orange box (div.content) will start expand ing upwards because the text has les space horizantal, but as soon as its the full height of div 2 is just keeps going and starts overlaping div.one, While I want it tp push itself down against div one and make his prant div.two bigger.
How can I fix this because I cant find a way to do this without using javascript.
http://jsfiddle.net/4qx6a/2/
Positioned with relative.
BTW, setting min-height:100% on your container and more than one on the inside is probably not the desired effect, unless you want each one to take up the entire height of the window.
I've made a similar one which you can use. This is working fine if i understood your question correctly.
the HTML
<div id="one"></div>
<div id="two">
<div id="content"></div>
</div>
<div id="three"></div>
the CSS
* {
margin:0;
padding:0;
}
body, html {
height:100%;
}
#one {
width:100%;
height:100%;
background:pink;
}
#two {
position:relative;
width:100%;
height:100%;
background:transparent;
}
#content {
width:100%;
background:grey;
border-top:3px solid black;
position:absolute;
bottom:0;
min-height:60%;
}
#three {
width:100%;
height:100%;
background:green;
}
working Fiddle Link
I have a div that is as high as the window and about 4 times as wide (it is stretched horizontally by elements inside it).
And then this other <div> inside it, which is supposed to be as wide width:100% as its parent (it's for a background picture).
However, the child <div> is only as wide as the window and doesn't quite fill up its parent. This happens in all browsers I've tried.
Why is that, and how can I fix it ?
Source :
<style>
.parent
{
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}
.child
{
width:100%;
height:200px;
position:absolute;
bottom:0;
left:0;
background-color:#000;
color:#fff;
}
.stretcher
{
width:10000px;
height:32px;
position:absolute;
}
</style>
<div class="parent">
<div class="child">this should stretch as much as its parent !</div>
<div class="stretcher">this is some content that defines the page's width</div>
</div>
JSFiddle
The .stretcher div will not expand the parent as position: absolute takes the element out of the page flow so its width has no effect on the parent. Child is behaving properly and expanding to the width of the parent. You can see this clearly if you use Firebug or similar.
As for how to fix it, not sure exactly what you're trying to accomplish with the stretcher div and why you don't just give the parent the width. Perhaps you could expand a bit on what you're trying to do with this structure.
Maybe the outside <div> should be positioned relative. The inside <div> can be absolute but you may want to try adding right:0px; as well as left:0px which you already have. I would avoid absolute positioning unless there is no other way to do it.
I'm not sure why the child <div> doesn't fill the parent, but in order for it to work you need to wrap the .stretcher <div> around both the parent and child <div>.
Source:
<style>
.parent {
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}
.child {
width:100%;
height:200px;
position:absolute;
bottom:0;
background-color:#000;
color:#fff;
}
.stretcher {
width:10000px;
height:100%;
position:absolute;
}
<div class="stretcher">
<div class="parent"><p>this is some content that defines the page's width</p>
<div class="child">this should stretch as much as its parent !</div>
</div>
</div>