I have a div placed on the bottom-left corner of the browser window by using position: fixed. When the user resizes the window, I want the div to resize as well, but preserve the original aspect ratio.
CSS solutions only (or a confirmation that it cannot be done solely using CSS). I'm working in IE9+. I will accept any solution: div resizing by its width OR height.
There were many questions (with solutions) like mine, however none of them seem to provide a solution for when the div is using position: fixed. Their solutions must have position: absolute, or they don't work.
EDIT 1: Codepen live example here.
EDIT 2: This is how I want it to work, whilst still using position: fixed.
It's not entirely clear to me if you know the aspect ratio in advance -- if so, you can just use a variation of
#content:before {
content:'';
float:left;display:block;
width:0;
padding-top:80%; /*height= 80% of width */
}
possibly combined with a min-height for #container? (This is a streamlined variant of the accepted answer in your link.)
Assuming you are looking for something where you will have a small div at the bottom right corner of your window and resizing the browser window will resize the small box.
HTML:
<div class="fixed-box">
Something...
</div>
CSS:
.fixed-box {
position: fixed;
bottom: 0;
left: 0;
width: 10%;
height: 10%;
background-color: #ccc;
}
Related
I have been sent numerous logos of numerous heights and widths (some very tall, others wide with minimal height) that need displaying in table/grid.
Is there a way of setting them all a certain height/width without causing distortion or the images to be chopped off.
Hopefully looking at a CSS solution but even a piece of software that may help.
As you want CSS solution so this may be helpful as it will make your images of same height and width.
<div id="logo"><img src="image.jpg"></div>
#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; left: 0; top: 0; }
This way you will be showing same images from top and left portion of your image.
This code is taken from another solution, here is full URL to that solution [How to set an image's width and height without stretching it?
[1]: How to set an image's width and height without stretching it? Hope that works for you
I'm trying to make a page with a fixed header using material design lite. The problem is that I can't get the entire space of the page-content div.
Suppose I wanted to paint red the whole page except for the navigation bar. This works on Firefox:
<div class="page-content" style="height:100%">
<div style="background:#ff0000;height:100%"></div>
</div>
codepen : http://codepen.io/anon/pen/qONpXQ
This exact same codepen doesn't work in Chrome. How can I get the whole space in Chrome? I don't really care if the solution breaks the page in Firefox.
I created a different solution. The problem with using vh to set a content container's height is that if the content becomes a lot it will overflow the background color since the div is now a fixed height.
In this code pen I have created a "background-color" using a pseudo element which allows the content to scroll as usual but have the background still.
http://codepen.io/mcclaskiem/pen/YyWYoP
.page-content{
background-color:red;
height: 100%;
width: 100%;
&:after {
content: "";
height: 100vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
}
For some reason "page-content" on chrome doesn't work with percentages, no matter what I do. My advice to you would be to either use the parent div for your content, or to define the height of "page-content" in ems or pixels.
I personally have a similar issue right now and I honestly can't get it solved
Edit: mcclaskiem solution works better try out this codepen
So, currently I'm trying to set the minimum height for some css tabled content based on the height of the picture rather than the height of the text.
In essence, my layout is like this:
<Image #60% width> | <Text #40% width>
And I'm currently using flex boxes to do this.
However, right now, when the page is resized (I cannot use static heights as it needs to be fully responsive), at a certain point the image becomes extremely small and the text makes the container huge.
I'd like, ideally, for the text to be the same height as the image at all times and, if there is overflow, for it to be scroll based.
Here's my current Jsfiddle.
http://jsfiddle.net/D7h3z/4/
I'm not averse to using technologies that are new/experimental. I am averse to using JavaScript for this as there shouldn't be a need. And if I do need to, I don't use JQuery, so please avoid that in your answers if you can.
3check out the changes I made to your fiddle -- New Fiddle
Essentially, I made the inner span of description absolute positioned and then placed an overflow-y auto on it's container span. I the applied a min-height of 200px to the img container and it appears to be working as you described. Let me know if this isn't the case.
.description {
width: 40%;
padding: 10px;
position: relative;
overflow-y:scroll;
}
.imagebox {
width: 60%;
min-width: 300px;
}
.imagebox img {
width: 100%;
min-height:200px
}
.description span {
padding: 10px;
position: absolute;
}
EDIT Actually doesn't work 100% yet, the image doesn't maintain aspect ratio... sad trombone
EDIT 2 Added in a min-width which sorta gets it there, but from a dynamic standpoint, this is far from ideal. I will give it another look later tonight.
I've got this problem, I've placed a div within a div, I've positioned the "title" to be height 50, and then "navbar" below it, so I've put height 100% though the thing is, its not staying within the div, its actually straying away from and out of the div and making a scrollbar appear.
I would love "site" to hog the walls and then all the other div fit in that div.
<div id="site">
<div id="title">TitleBar</div>
<div id="navbar">NavBar</div>
<div id="frame">FrameBar</div>
</div>
body{
margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}
I've found an image that shows something similar.
http://img176.imageshack.us/img176/4637/picture1zb1.png
that's because 100% height actually means "use the same height as the container".
But I didn't quite get all your requirements for this layout, if your navbar is a navigation bar, it should be designed in a way that allows scrollbars to appear when the content is too big.
But I think you're going for the wrong structure to accomplish this, is there any actual reason you want a wrapper div? I've created a fiddle on this, check if this is closer to what you wanted: http://jsfiddle.net/6g6HV/2/
This other one is yours, in case you wanna play with it: http://jsfiddle.net/yq8PS/3/
Edit: Adding the javascript solution to the answer http://jsfiddle.net/6g6HV/9
You can make divisions in HTML appear side by side to each other by adding a float property to the css.
#navbar{
border: 1px solid #c38a8a;
width: 200px;
height: 100%;
float: left;
}
Additionally, always add the 'px' unit after a size. Modern browsers assume you mean px, but older ones might not.
There isn't a good way to prevent the overlapping when you have a sidebar that is a set pixel width. To achieve the liquid width (or fluid width) style, you would have to add negative 200px margin on the left to the #frame (to counter sidebar). Then, add another divsion inside the #frame to do the styling for that portion. This is how I have achieved the look on my web site, and it's also the solution used in the previous default Drupal theme (Garland).
#frame{
margin-left: -200px;
}
IN this context, 100% for the Navbar doesn't mean the remaining height but 100% of the visible heigth of the parent; so if the parent has a height of 400px then Navbar will also have an height of 400px. If you add to this size the height of the title bar, you get a total value greater than the size of the parent; therefore the appearance of the scolling bar.
While there is usually no problem with the width to make it appears to fill the whole length of a screen, it's very difficult in HTML & CSS to do the same with the height as they have not been designed for this sort of thing; especially with an imbricated structure (div inside div).
Some people will use Javascript to get the size of the screen (browser) and compute the size of their objects accordingly but I don't know if you can do the same with a pure HTML/CSS solution; especially if you want to have your solution compatible accross many browsers.
For more info, take a look at http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
This is the website I'm having problems with: http://bgflirt.com
I need the menu on the left to have a fixed width and the part with the user pictures should resize when the browser window is resized (width in percent). However, as you can see - the part where the content is refuses to align on the right of the menu, but is instead displayed below it. Can someone help me with this ?
For #content_wrap remove width:100% and float:left. This will make box to stretch to fill all available horizontal space.
You'll need to also clear floats in whatever way you prefer. E.g., add overflow: hidden; to #content_wrap.
This works for me in firebug.
BTW, since you use fixed-width graphics for header and footer (frame with those nice rounded corners), you can't really stretch them.
Try using something like this for your CSS:
.container {
position: relative;
}
.sidebar_wrap {
position: absolute;
top: 0;
left: 0;
width: 130px;
}
.content_wrap {
margin-left: 130px;
}
I believe that is much easier to work with than a float.
A couple of things.
First, get rid of the xhtml doctype and instead start using an html 4.01 strict doctype. xhtml, besides being on it's way out, has inconsistent rendering across a lot of browsers.
Second, this is MUCH easier to accomplish with a table. Just set the width of the table to 100% and the width of the first column to 130px. The layout engine will take care of sizing the other side. Incidentally, this will solve some of the other issues you're going to run into such as making both sides have the same height.
your #content_wrap div has a 100% width, like so it's impossible for it to float left when theres a menu with a 130px width...
You should make the menu's width in % if you really want to make the site resizable... something like
#sidebar_wrap{
width: 15%;
float: left;
}
#content_wrap{
width: 85%;
float: left;
}
note that the sum of the width can't be bigger than 100%, and you should take paddings and borders in consideration.