I need to keep div aspect ration as 4:3 in both case when browser mostly horizontal or vertical. And need div size to increase as browser window increase.
I found this solution to set padding-bottom: 75%; width: 100%;. It works when browser window is dominantly vertical, but when browser window is dominantly horizontal, I don't get the result as desired.
Do you have any idea? Would you recommend using Javascript? If so, then how?
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
border: 1px solid red;
padding-bottom: 75%;
width: 100%;
}
</style>
</head>
<body>
<div class="ex1"/>
</body>
</html>
Using padding hack to get element ratio does not work with borders -- border makes it square. Below are 2 cases, one without max width container, and one with it.
body {
padding: 0;
margin: 0;
}
.r-4by3-wrap {
max-width: calc(100vmin * 4 / 3);
margin: auto;
}
.r-4by3 {
height: 0;
padding-top: 75%;
}
<div class="r-4by3-wrap">
<div style="border: 10px solid red">
<div class="r-4by3" style="background: pink">
</div>
</div>
</div>
If we consider the fact that you need to consider the screen as a reference then you can do this by adding a max-width using vh unit to avoid having the element bigger than the sreen height. The ratio is 4:3 so when the element is 100vh the width need to be 133.33vh so the element should never exceed this width.
You need to also apply the padding trick to a child element since the parent will not have full with in all the cases and the padding is related to the upper container. Applying it to the div will give wrong result.
div.ex1 {
border: 1px solid red;
box-sizing:border-box; /* Don't forget this to include the border in the height/width*/
width: 100%;
max-width:133vh; /* 4/3 * 100vh */
margin:auto;
}
div.ex1:before {
content:"";
display:block;
padding-top:75%;
}
body {
margin:0;
}
<div class="ex1"></div>
You can also use media queries to check the aspect ratio and change the height and width for the div accordingly.
Just to clarify:
vmin - Equal to the smaller of vw and vh.
Quoted from developer.mozilla.org
With that in mind we can do something like this:
<!DOCTYPE html>
<html>
<head>
<style>
body { padding:0; margin:0; text-align: center;}
div.ex1 {
border: 1px solid red;
box-sizing: border-box;
margin: 0 auto;
}
#media (min-aspect-ratio: 4/3) {
div.ex1 {
width: 133.33vmin;
height: 100vmin;
}
}
#media (max-aspect-ratio: 4/3) {
div.ex1 {
width: 100%;
height: 75vw;
}
}
</style>
</head>
<body>
<div class="ex1"/>
</body>
</html>
I think the percent of height doesn't work, try to use vh instead of percent.
Use javascript window.onresize event
window.onresize = function(event) {
// Here get the height of page and give them multiplied bu 4/3 to the width of div
};
Related
I am struggling to work the css out for this scenario. I have a fixed height header (no problem there). Underneath I have two side by side blocks.
The blocks should go from the header to the footer (with a small margin).
I would like the first block to have a minimum width of 25% of the browser width. The second block should have an aspect ratio of 4:3. It should be able to achieve this in most cases by expanding the first column past 25%.
In the cases when the first block can't shrink below 25% width, the right block should still be 4:3 but vertically centred in the view.
Is this possible with just CSS? I need to support modern browsers and IE 10.
Thanks
You can use code below:
header {
height: 50px;
}
.container {
display: block;
height: 100vh;
width: 100%;
display: table;
}
.left-block {
height: 100%;
min-width: 25%;
width: 25vw;
background: yellow;
}
.left-block,
.right-block {
display: table-cell;
vertical-align: middle;
}
.right-content {
background: blue;
width: 74vw;
height: calc(75vw * .75);
}
<header>
header
</header>
<div class="container">
<div class="left-block">left content</div>
<div class="right-block"><div class="right-content">right content</div></div>
</div>
Using the vwcss unit with a min-width on the yellow block should do what your wanting. Hard to say for sure with out a fiddle or codepen to look at your actual code.
min-width: 25vw;
width: 25%;
For the blue area at a 4:3 ratio you can use the vw css unit again for the width and use the calc function for the height.
width:75vw;
height: calc(75vw * .75);
I want my website to scale a <div> based on the resolution of the screen on which it's viewed.
I'm currently using this code in a function which runs as the body loads (gameCanvas is the <div> I'm talking about):
var WIDTH = window.screen.availWidth/2,
HEIGHT = window.screen.availHeight/2;
var c = document.getElementById("gameCanvas");
c.setAttribute("style","width:"+WIDTH+"px;height:"+HEIGHT+"px");
c.style.width=WIDTH;
c.style.height=HEIGHT;
It does the job, but it also overwrites my CSS stylesheet and it forces me to put all the styling information in the javascript instead of separating the style from the logic.
Is there a way to dynamically determinate those parameters in the CSS, or to just change those two parameters without overriding the whole stylesheet? I've already tried
c.setAttribute("height", HEIGHT);
c.setAttribute("width", WIDTH);
but it does nothing since they're not attribute by themselves.
EDIT:
My stylesheet (for now it's embedded in the index.html but it's already in the CSS form):
<style>
body {
background-color: black;
}
#gameCanvas {
background-color: black;
width: 800px;
height: 600px;
margin: auto;
align: center;
}
#scoreboard {
text-align: center;
font-family: Segoe UI, Helvetica, Ubuntu, sans-serif;
color: white;
}
#scores {
font-size:600%;
padding:0;
margin:0;
color: white;
}
#title {
background-color: white;
color: black;
}
</style>
Using JavaScript is one option. As an alternative I'll offer 2 CSS-only solutions. There are 2 solutions that come to mind first.
Option #1
The first is pretty standard - set the height and width to 100%. The caveat here is every parent parent container needs it's height and width set to 100% too. Like this:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
main {
width: 100%;
height: 100%;
}
#gameCanvas {
background-color: red;
width: 100%;
height: 100%;
}
<main>
<div id="gameCanvas"></div>
</main>
Option #2
The more elegant solution would be to use vw and vh units. vw and vh units are equal to 1% viewport width and height respectively. So 1vw would be 1% of the viewport width. To make an element full-screen you can set the width and height to 100vw and 100vh respectively. Like this:
html,
body {
margin: 0;
padding: 0;
}
#gameCanvas {
background-color: red;
width: 100vw;
height: 100vh;
}
<main><div id="gameCanvas"></div></main>
I just want to make a div below some fixed texts, and I want the div to fill exactly the height of the page, and I want it to work cross-browser... It is hard to believe how much work such a nature task requires.
I tried this code, which adjusts the height by jQuery. It works well in Chrome, but it does not work perfectly in Chrome: if we scroll down, we could see it does not automatically restore to the initial position.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<style>
body {
margin: 0
}
.rb .myME {
background: grey
}
</style>
</head>
<body>
<div class="rb">
<div class="top">1<br/>2<br/>3<br/>4<br/></div>
<div class="myME">abc</div>
</div>
<script>
$(".myME").css({
height: (($(document).height()) - $(".top").height()) + 'px'
})
</script>
</body>
</html>
Does anyone have a perfect solution (CSS or jQuery) cross-browser?
for older and newer browsers , the display:table properties could match your requirement.
html,
body,
.rb {
margin: 0;
height: 100%;
}
.rb {
display: table;
width: 100%;
border-collapse: collapse;
}
.top, .myME {
display: table-row;
}
.buffer {
display: table-cell;
}
.top .buffer {
background: lightblue;
}
.myME .buffer {
background: tomato;
height:100%;
}
<div class="rb">
<div class="top">
<div class="buffer">
1<br/>2<br/>3<br/>4<br/>
</div>
</div>
<div class="myME">
<div class="buffer">
abc
</div>
</div>
</div>
the .buffer div is to make sure that each of your rows are made of a single cell to avoid layout to be split also in columns.
If you want to make that div under that text you need to do some css there you can find many tutorials because it is in basics:
Use position relative to parent div and position absolute to div that u want to move under text.
If you want to use full height you don't need jquery use VH - viewport height as height: 100vh; to have full height of any devices.
I am not sure does VH works everywhere but it does for me in chrome, fox, edge
By W3schools it works here: https://www.w3schools.com/cssref/css_units.asp
If top div is a fixed size ( just change size in both heights in top div and calc function ) you can try this :
body {
margin: 0
}
.rb {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
width: 100%;
height: 100px;
}
.myME {
width: 100%;
height: calc( 100% - 100px);
background: grey;
}
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="rb">
<div class="top">1<br/>2<br/>3<br/>4<br/></div>
<div class="myME">abc</div>
</div>
</body>
</html>
I hope this helps you
I want to make the div 30% of the height of the window and then on click make it 90%. The thing is I'm only being allowed to specify widths in percentages but with height it breaks unless its px. Any thoughts? Here's a link:
http://codepen.io/chris86/pen/avvWwJ
Here's the html:
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<div id="button" class="banner" value="Switch Class"></div>
Here's the CSS:
.banner {
background-color: #c3c3c3;
height: 100px;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 200px;
width: 80%;
padding: 0;
margin:0 auto;
}
And the jQuery:
$(function() {
$('#button').click(function(){
$(".banner").switchClass("banner","bannerbig",'fast');
$(".bannerbig").switchClass("bannerbig","banner",'fast');
return false;
});
});
The reason your code breaks is because using percentage as the value for height or width is dependent on the height of the parent. As far as the DOM is concerned, the only element that has absolute height / width by default is the document object.
So, you have to specify the first DOM elements which don't have absolute height by default as a percentage of the document's height, like so:
html, body {
height: 100%;
}
Then use the appropriate percentage heights for your .banner and .bannerbig classes in CSS:
.banner {
background-color: #c3c3c3;
height: 30%;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 90%;
width: 80%;
padding: 0;
margin:0 auto;
}
Hope this helps.
I want to have the effect like dropbox:https://www.dropbox.com/ where my website is centered in the exact middle of the page.
Achieving this effect is way more complicated than it should be. Here's a bare-bones working example: http://jsfiddle.net/JakobJingleheimer/UEsYM/
html, body { height: 100%; } // needed for vertical centre
html { width: 100%; } // needed for horizontal centre
body {
display: table; // needed for vertical centre
margin: 0 auto; // needed for horizontal centre
width: 50%; // needed for horizontal centre
}
.main-container {
background-color: #eee;
display: table-cell; // needed for vertical centre
height: 100%; // needed for vertical centre
// overflow: auto; // <- probably a good idea
vertical-align: middle; // needed for vertical centre
width: 100%; // needed for horizontal centre
}
.container {
background-color: #ccc;
padding: 20px;
}
If you want to achieve this:
Here are different methods, with the pros/cons of each one, for centering a page vertically. Choose which one you prefer:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
EDIT. As suggested, I will proceed to explain one of the methods. It only works if you already know the height/width of the element to center (the link includes more methods). Assuming all your content is within <body>, and that your content is 900px x 600px, you can do in your css:
html {
width: 100%;
height: 100%;
}
body {
width: 900px;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px; /* Half of the height of your body */
}
However, this falls short for dynamically generated content, since you don't know the height of it. I've used it succesfully on log-in box pop-up and settings pop-up.
Another method I've used in the past for the whole page is the Method 1 from the link. It makes a set of divs to behave as a table, which can vertical-align to the middle.
If you want to align it vertically center, please check this web page: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you know the width and height of your page
then wrap your contents in following div css
.center
{
position:absolute;
top:50%;
left:50%;
margin-left: -(yourPageWidth/2);
margin-top: -(YourPageHeight/2);
}
On your topmost div give margin:0 auto 0 auto; Also define some width to that div.
First create a main container of the desired width and then put all your code inside the main container. For Eg.
<body>
<div id="container">
......... your code
</div>
</body>
And in the css
#container{
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
You can change the width as per your needs
<body>
<div class="container">
......... your code
</div>
</body>
#container{
width: 700px ;
margin:0 auto ;
padding:0px;
}
Try this:
html
<span id="forceValign"></span><!--
--><div id="centerMiddleWrap">
<div id="centered">Hello this is some text. Hello this is some text. Hello this is some text.</div>
</div>
CSS
html {
height: 100%;
background: #eee;
}
body {
margin: 0;
height: 100%;
/*important*/
text-align: center;
}
#centerMiddleWrap {
/*important*/
display: inline-block;
vertical-align: middle;
}
#forceValign {
/*important*/
height: 100%;
display: inline-block;
vertical-align: middle;
}
#centered {
background: #000;
color: #fff;
font-size: 34px;
padding: 15px;
max-width: 50%;
/*important*/
display: inline-block;
}
Here is an demo
Wrap a div and define its width, use margin:0 auto for centering the div.
You can check a site's CSS by using Firebug or browser extensions.