http://www.juliabailey.com/
This website has fluid design and it's working very nicely.
http://goo.gl/j6snn
This is my website. Fluid view is depending on width. Therefore, when I get my browser bigger width gets bigger as well as height. But the problem is height is too big and creating scrollbar which I don't want. I don't what scrollbar to appear on my page. I think the best way would be fluid view depending on height so it always fits in browser no matter your browser is 800x600 or 1600x1200. How can I do it ?
Here is my wrapper code;
#wrapper {
width:auto;
height:auto;
width:80%;
min-width:550px;
max-width:1150px;
margin:50px auto 0 auto;
z-index:100;
}
use percentages for the properties of your classes. for example:
wrapper {
width: 92%;
}
content {
width: 73%;
}
sidebar {
width: 25%
}
type thing OR
you can also use javascript to detect what you need and then change the implementation dynamically. kind of like this
function dynamicLayout(){ var browserWidth = getBrowserWidth();
// Narrow CSS rules
if (browserWidth < 640){ changeLayout("narrow"); }
// Normal (default) CSS rules
if ((browserWidth >= 640) && (browserWidth <= 960)){ changeLayout("default"); }
// Wide CSS rules
if (browserWidth > 960){ changeLayout("wide"); } }
in your example, you have a min width property, which means if it's less then that you will have scroll bars. if you dont want scroll bars, you can't set any static value to any layout element, so it may flex to the browser window size.
Use min-height and max-height, so the browser stops the zooming when reaching them. You sample's scrollbar is always visible, even when it's "empty", and that's why it doesn't jump when resizing.
Related
<body>
<div>
</div>
</body>
div {
width:10vw;
height:10vh;
}
Is there any way to set this div that will be 10% of the full available window ? (When the window browser cover all the screen).
Last time I did it with script in JS but I believe nobody does this and only use css.
Instead I can use px but even with media queries I won't know how it will looks like in other screens.
Anoher option: Using max/min-height/width, but still I don't know what value I need to set from avoiding from the div shrinking (every screen is different px) or just let the div shink to some point - but either at this way I don't know how it will look on other screens.
Thanks.
By specifying the min-height and max-width, you'll be able to control its size.
div {
max-width: 10vw;
min-height: 10vh;
}
Empty div elements have a height of 0 by default so the min-height keeps it from shrinking to nothing.
div elements are also display: block; by default, which means the width is 100% of the containing element. Defining the max-width will restrict that dimension of the div.
You should use max-height/min-height/width in percentages.
div {
width:10%;
max-height:10%;
min-height:10%;
position: fixed;
border:1px solid blue;
}
Im doing a react app that prints multiple "elements" like if it was some sort of calendar.
But im trying to setup a background-color so it will cover the background behind all the cubes, but seems impossible to do.
I basically have this
Calendario.jsx
render() {
return (
<div className="container">
<CalendarGrid weeks={this.getLivedWeeks()}/>
</div>
)
}
CalendarGrid.jsx
render() {
let rows = []
for (let i = 0; i<this.props.weeks;i++){
rows.push(<CalendarFields key={i} />)
}
return <h1>{rows}</h1>
}
Then in calendario.css
I've applied this
.container{
background-color:yellow;
height:100%;
}
But it wont display anything. Meanwhile if I put
.container{
background-color:yellow;
height:100vh;
}
It works just as I want it, but it only covers the 100vh , but my screen happens to take more than 100vh since I have to scroll down, so thats not the solution.
I dont understand why height: 100% wont work there
This is how it happens to looks with 100vh
Now in your example the div contains only floated elements. This makes it collapse to a height of 0px. The adjacent calendar Grid will appear to the left/right of the floated div because they are considered as normal floated elements.
Now declaring overflow establishes a new block formatting context, which makes the div contains its children. Suddenly the div "reappears", not having size 0px anymore. The calendar grid is getting pushed to the bottom.
When dealing with widths, the % unit is more suitable. With heights,
the vh unit is better.
Key Differences----
height: 100vh = 100% of the viewport height
height: 100% = 100% of the parent's element height
That's why you need to add height: 100% on html and body, as they don't have a size by default
Something you have to know : if you use % for vertical margin or padding, % will be calculated on the width of the parent element, not the height.
Tip : try using vh and vw units for font size :) I like this one (not supported in some browsers I know) : font-size: calc(.5vh + .5vw); (for example)
% vs vh
How can I make the height of a div tag auto resize according to the height of the browser?
When I do height: 100%, it only resizes based on how much text is in there.
Here is the web page and it's the first div, the one with the blue background is the one that I am trying to make the height auto resize:
http://rachelchaikof.com/awareness/
Actually you must be missing to set an height: 100%; for parent elements, also make sure you use this to make your div height 100%
html, body {
height: 100%;
width: 100%;
}
100% height - resize window problem
"height:100%" means 100% of the browser window. If the page beyonds the browser window (ie. needs scrolling to access) those bits of the page are outside the elements set to height:100%. Which if you have backgrounds or other effects (e.g. borders) won't extend beyond the first 100%.
The correct way to handle things is
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */
If you use min-height in this way, you must ensure all the antecedent elements have a fixed height of 100% (ie. html & body).
or you can use Jquery.
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});
height:100% means the same height as the parent, that is, the element your div sits in. So if you want to make it the same height as the browser, you'll need to make all its ancestors 100% high, all the way up to html!
When is comes to responsive design there are many creative ways to approach the issue at hand.
You could try using percentages to make your Design more responsive. Using percentages is a safe bet for maximizing on the users viewport.
eg.
html, body {
height: 100%;
width: 100%;
}
From there you can play with your site containers and go more specific.
Also some JavaScript in your head section of the HTML can help you detect screen sizes and adjust different CSS rules accordingly:
<!-- hide script from old browsers
//<![CDATA[
var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight
function sniffer() {
var el=document.getElementById("body");
if(screen.width<=600) {
el.style.width='100%';
el.style.height= windowHeight;
el.style.margin="auto";
}
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->
The JavaScript above is checking if the user's screen is smaller or equal to 600px; if so, it adjusts the width, height, margin rules for the body element.
Hope this helps!
I'm working on building a mobile friendly site of our companies main website. The way it is designed is around 2x for retina. What I'm planning to do is set the main content around a maximum width of 640px, width set at 100%. I have a certain background image that fits nicely do that. But as the width of the div gets smaller, I need the height to adjust as well. Any ideas?
Here's the css:
*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;}
body {
margin:0;
background-color:#fff;
}
.top, .body {
max-width:640px;
width:100%;
margin:0 auto;
}
.top {
background: white url(images/top.jpg) no-repeat;
background-size:auto;
overflow:hidden;
height:124px;
max-height:124px;
}
.top ul {
list-style:none;
height:100%;
}
.top ul li {
height:100%;
float:left;
display:block;
}
I did find an answer to this. It adds a little bit of unsemantic markup, but works well.
Can find it here: http://jsfiddle.net/AdQ3P/
The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.
Edit Here's the code, so not dependent on jsfiddle.
<div class="container">
<div class="hero"></div>
</div>
.container {
width:100%;
max-width:500px;
}
.hero {
width:100%;
height:0;
background-size:100%;
background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
padding-bottom:75%;
}
Also that was one messy desk i had lol.
You can also use a little jQuery. I believe the advantage is that it is a semantically valid fix, so the next guy who edits your code might have an easier time understanding what's going on.
// Maintain aspect ratio of #my_div
// Set aspect ratio of #my_div
var aspect_ratio = 0.8;
// Store the jQuery object for future reference
var $my_div = jQuery("#my_div");
// Within your document ready function,
// Do an initial resize of #my_div
$(document).ready(function(){
$my_div.height( $my_div.width() * aspect_ratio );
});
// Resize #my_div on browser resize
jQuery(window).resize(function() {
$my_div.height( $my_div.width() * aspect_ratio );
});
while a non-fixed width (e.g. 100%) takes all the container's width, the height of an element when not set to a fixed size will stretch to accomodate any in-flow content (including padding, margin, borders...)
if you can use an <img> tag instead of a background image, you can then apply max-width:100% to the image itself and it will scale to fit the container - the browser will take care of resizing its height to keep the aspect ratio consistent - however replacing a css background with an image tag is not always possible or the best option in terms of semantics and/or any layout issues you may face.
Working very well without a set height or img using the new relative font sizing units, e.g. vm (http://www.sitepoint.com/new-css3-relative-font-size/).
i have a div on a web page that basically acts as a panel container. i want it to:
have a minimum width of 1000px; So no matter how small the content inside the div is, it will at least keep the panel to 1000px in width:
in terms of max width, it should keep going as big as the content within it. So if a person has a 24 inch monitor and they want to maximize the browser it should keep growing until the content inside doesn't have any scroll bars and then stop.
needs to work in all browsers.
how would i do this in css?
Assuming this item is a block element (i.e. "display: block"), it should scale automatically as wide as its containing element (in this case the browser window).
In CSS, just specify "min-width: 1000px." This will work in IE8+ and all modern browsers.
try this
#panel {
min-width: 1000px;
diplay: block;
overflow: hidden; }
Try this:
#panel
{
/* Other styles */
min-width:1000px;
/*width:100%; - removed as it will create horizontal scrollbar if margin and padding aren't 0 as per Josh's comment.*/
}
However, you will problems with older browsers like IE6 which do not like the min-width thingy in which case you will need to use JavaScript.