I have a div that should have a maximum height and a preferred height. In the sample posted below, I have #test with a black background and a maximum height of 800px. When the browser view-port has sufficient available space, it should take 800px. If less space is available (i.e. mobile devices), the maximum amount of available space should be used. How can this be achieved with preferably just CSS?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Prototype</title>
<style>
body, html {
margin: 0;
height: 100%;
width: 100%;
}
#test {
background-color: black;
background-position: center;
background-repeat: no-repeat;
max-height: 600px;
max-width: 800px;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
Also include the following attributes to #test:
height: 100%;
width: 100%;
Fiddle link here: http://jsfiddle.net/Nx5Zb/
With embedded full-page result: http://jsfiddle.net/Nx5Zb/embedded/result/
Related
1st of all this is about the mobile version of a site
My goal is to take an image clip it in it's center and make it free for the user to move left and right as he pleases
I believe I am the wrong foot and clip value shouldn't be used don't take my code and try to fix it may be completely wrong
I have an idea to hide the image left and right somehow but I don't know how to implement it
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.center-cropped {
width: 500px;
height: 800px;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
.center-cropped img {
min-height: 100%;
min-width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* modern browsers */
opacity: 0;
}
</style>
</head>
<body>
<script>
</script>
<div class="center-cropped" style="background-image: url('office.gif');">
<img src="http://placehold.it/400x400" />
</div>
</body>
</html>
I have a page with many images in divs and the layout looks good only in full size, when the browser window is smaller it's really messy. I found a similar question on stack overflow but their answers don't work for my case.
EDIT: I did everything what you guys advised but it still doesn't work.
<!DOCTYPE html>
<html>
<body background="">
<head>
<style>
div.asciigun {
top: 30%;
left: 50%;
position: absolute;
max-width: 100%;
}
</style>
</head>
<body>
<div class="asciigun">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU7ROirglSjKnpsLvt29uCDlVtpZutirtiXyg3FF0UtXFf0TnE" height="90%" width="90%" >
</div>
</body>
</html>
Let's try another approach. Try not to modify max-width or max-height. Just leave it as it is (or set width: 100% and height: 100%).
And then change <img src="url.jpg"> to background: url("url.jpg"); and then just do
.image {
background-size: cover;
}
or
.image {
background-size: contain;
}
Ok I figured it out! I needed viewport value instead of %. Now images go proportionally with browser size and stay in place.
div.asciigun {
position: absolute;
top: 30vw;
left: 74vw;
z-index: 1;
width: 30vw;
height: 15vw;
}
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 am using Vide to play a video in the background.
Here is the playing div tag.
<div style="width: 1000px; height: 500px;"
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>
when i change the style to
width: 100%; height: 100%;
The video disappears from the page. I want that video covers all page and I can scroll down.
Why does it happen?
How can I fix it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Body background example</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="video/ocean">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="../src/jquery.vide.js"></script>
</body>
</html>
This is fine just put scroll bar or use some jquery for scroll purpose.
if you want to cover all with the div and adjusted depending on the size of the screen, this is the code (Important, this is directive to the div):
style="
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
-webkit-background-size: cover;
background-size: cover;
background-image: none;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;"
if you want in the body, in the folder examples/body-bg.html is the examples for apply to the body only: https://github.com/VodkaBears/Vide/tree/master/examples
You are using the wrong units of measurement. If you pull the image in via CSS image-background then you can set the image-background-size to the contain property. It will insure that the video completely fits into it container (body, div, span, etc.).
body{
background-image:url(''your-video.mp4');
background-repeat:no-repeat;
image-background-size: contain;
}
Source: w3schools CSS3 background-size Property
You could also try using the height and width but use the vh and vw metrics. It sets the height and width based on the view ports dimensions.
Source: CSS Units
I have a div and i want that It has always 80% of body's height.I have thought a function that catch body's height when site is loading and calculate 80% of It giving the result at div's height.The problem is that when the user do the zoom of the page div's height doesn't resize.How can i solve this problem?
use this style for your div :
height: 80vw;
Just set the height to be 80% in css given the div is direct child of body
div {
border: 1px solid red;
height: 80%;
}
body, html {
height: 100%;
}
<html>
<head>
</head>
<body>
<div>yo</div>
</body>
</html>
alternatively use height: 80vh; if your body is 100% viewport height.
div {
border: 1px solid red;
height: 80vh;
}
<html>
<head>
</head>
<body>
<div>yo</div>
</body>
</html>