Ive tried adding max-height for a container to define its height but have a maximum height to dont exceed limits on higher resolutions.
But using max-height is not working here and I dont know why:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.wrapper {
width: 100%;
padding-bottom: 39.65%;
max-height: 200px;
height: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="https://image.shutterstock.com/image-vector/sample-red-square-grunge-stamp-260nw-338250266.jpg">
</div>
</body>
</html>
EDIT:
It was not possible to limit the height with this approach so I used height with vw.
.wrapper {
height: 39.65vw;
max-height: 200px;
/* ... */
}
max-height and padding are 2 different properties. The last one won't be limited or affected by the first one.
So, to limit the overall height of the box you need to compute when 200px is the 39.65% of your parent width. Assuming this is the whole viewport that happens when the width is ~504px. At that point with a mediaquery you just set the padding-bottom to 200px;
.wrapper {
width: 100%;
padding-bottom: 39.65%;
height: 0;
box-sizing: border-box;
}
#media all and (min-width: 504px) {
padding-bottom: 200px;
}
Related
I can't understand why this input field with margin (at all sides) is not fitting well within that div. I was hoping to see the input with the right margin being shown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>CSS Tests</title>
</head>
<body>
<div class="div2">
<input type="Foobar">
</div>
</body>
</html>
body {
margin: 0;
}
.div2 {
width: 100%;
height: 100px;
background-color:indianred;
}
.div2 input {
width: 100%;
margin: 10px;
box-sizing: border-box;
}
Width 100% will set the width to the available space, which in this case is the width of the parent div. Try setting the width to width: calc(100% - 20px); (subtract the margin out).
here is a fiddle link to demonstrate https://jsfiddle.net/2vcokm6x/
The problem is that your width: 100% on the input element does not account for the margin being set. To work around this, you need to subtract 20px (for both the left and right margin) from the width. This can be achieved with calc(), as seen in the following:
body {
margin: 0;
}
.div2 {
width: 100%;
height: 100px;
background-color: indianred;
}
.div2 input {
width: calc(100% - 20px);
margin: 10px;
box-sizing: border-box;
}
<body>
<div class="div2">
<input type="Foobar">
</div>
</body>
Just now I ran into a weird probelm, I have a fixed element with height:100%. Everything works well until I open Chrome Dev Tool and enter the mobile debug mode.I found in mobile debug mode the fixed element's height will not 100% but a little overflows. After my repeated debugging, I found the sibling's translateX property affects the fixed element's height. And when I tweak the value of translateX property, the height of the fixed element changes too.
I simplified it into the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Fixed Element Height Not 100%</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: hidden;
}
.a {
transform: translateX(100px);
width: 100%;
height: 200px;
}
.b {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
Could someone tell me that whether this is expected or not ? If this is expected and what causes this ?
Remove 2nd body tag CSS, which is overflow:hidden and add that property to first body tag CSS, following code will help you.
body {
height: 100%;
width: 100%;
overflow: hidden;
}
not sure but try to use vh instead of %
thinks this article would be very interesting aswell for this matter:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
i made a new layout but there are sidebands or sidelines(i mean the scroll lines "when too much content" and you have to scroll a lot" but this side line is on the bottom in google chrome) appears at full viewport dont know why does it happens. if i change the wrap width from 100vw to 90 there will be white space on the right side which is not good.
Here is the image:
And here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="el2">header</div>
<div class="el1">left</div>
<div class="el3">
<div class="el5">pakk1</div>
<div class="el6">pakk1</div>
phakk
</div>
<div class="el4">footer</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.wrap {
width: 100vw;
height: 100vh;
background: grey;
}
.el2 {
width: 100vw;
height: 30vh;
background: #C2FF76;
}
.el1 {
width: 20vw;
height: 70vh;
background: blue;
float:left;
}
.el3 {
float:left;
width: 80vw;
height: 70vh;
background: red;
}
.el4 {
width: 100vw;
height: 13vh;
background: purple;
float:left;
}
.el5 {
width: 30vw;
height: 13vh;
background: green;
float:left;
}
.el6 {
width: 40vw;
height: 13vh;
background: green;
float:right;
}
If you hide the overflow on your top-most container this issue will go away.
.wrap {
overflow: hidden;
}
It's good to figure out why you have an overflow though so you can fix the underlying issue.
https://css-tricks.com/findingfixing-unintended-body-overflow/
Note: you can also only change the overflow for the X and Y axis
https://css-tricks.com/almanac/properties/o/overflow/
Bootstrap uses negative side margins on some elements, that's what causes your problem.
Just change all the vw values to % values (same numeric values) - these consider the "real width" of the parent elements.
https://codepen.io/anon/pen/MopXrq
Actually the problem was some of the boxes height : vh exceeded the limit.
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
I read that width in metaviewport tag defines the virtual width of the viewport and then this viewport is scaled up to fill the screen as per the initial-scale. The problem is that I do not see any difference when I change the width = device-width to any other value like width = 600 or width = 1200. Following two versions are rendered same:
width = 600 :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width= 600px, initial-scale = 2">
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
ul {
list-style: none;
}
.container {
width: 96px;
height: 96px;
position: relative;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container"> Hello
</div>
</body>
</html>
width = 50 :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width= 50, initial-scale = 2">
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
ul {
list-style: none;
}
.container {
width: 96px;
height: 96px;
position: relative;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container"> Hello
</div>
</body>
</html>
Meta viewport is used to help render pages on atypically sized screens.
Chrome on a Windows 7 desktop scaled screen isn't going to support it.
To see any effect you would need to use something like Chrome for Android or Mobile Safari on iOS on a smart phone sized display.