I want to fill the remaining portion left in nested Div with background color & after many R&D I got to know that it can be done by using height: -webkit-fill-available. Can anyone tell me how to use this webkit-fill-available feature in Visual studio 2015
It should work:
<!doctype html>
<head>
<title>webkit fix</title>
<style type="text/css">
body {
height: 100vh;
max-height: -webkit-fill-available;
display: grid;
align-content: center;
}
</style>
</head>
<body>
<h1>webkit fix</h1>
</body>
As you move the browser around you should see it stays in the middle. Oddly enough it doesn't seem properly documented on MDN - search result appear but there's nothing on the actual pages
Related
Ive referenced several different stack overflow questions, and tried solutions that seem similar to mine and I cant seem to find the answer. Why is the image not loading?
ive tried using these in both a class tag and the body tag. Ive tried backwards and forwards slashes. Ive tried clearing my cache. Ive tried adding additional rules for height width and contain. All to no avail. Ive tried local and pixabay urls as well.
background-image: image('../img/eye.jpg');
background-image: url("img/eye.jpg");
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles\styles.css">
</head>
<body>
<div class="wrapper">
<h1>Front Page</h1>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
margin: 0 auto;
width: 1000px;
}
.img-eye {
background-image: url("https://pixabay.com/photos/dog-bathing-sea-waves-portrait-4565646/");
background-size: 100%;
height: 200px;
width: 300px;
}
body {
background-image: image('../img/eye.jpg');
background-color: #000;
}
No error messages nothing. Damned thing is dead pan. Code also on js fiddle. https://jsfiddle.net/greenthingsjump/htq4os9c/1/
You need to reference the image url with a picture extension (jpg, png, svg). You are referencing a page with an embedded image. Try changing the body style to include this url:
https://cdn.pixabay.com/photo/2019/10/21/10/04/dog-4565646_1280.jpg
You also aren't using your img-eye class, in case you were unaware.
You're not referencing the "img-eye" class in your html. Also, make sure you're making use of the right path for your image location
It was a combination of using the right relative path and remembering to use the class referenced. You guys nailed it. Thanks!
I have an image inside a scrollable div and it is getting cut off by about 50% I am guessing. I can only see the bottom 50%.
Here is the relevant css:
.imgContainer{
height:auto;
display:flex;
align-items:center;
overflow:auto;
}
.img{
width: auto;
max-width:100vw;
height:auto;
}
Here's a link to a deployed version on heroku (you may have to click "skip" a few times to get an image and clicking an image lets you see the full version). https://weratestatists-bot.herokuapp.com
Also if anyone can figure out why my favicon isn't working I'd much appreciate it. Thanks!
Change
.post, .titleCont {
display: flex;
align-items: center;
}
to
.post, .titleCont {
display: flex;
align-items: baseline;
}
Also your favicon is broken in some browsers because you put 2 slashes in the URL
<link rel="shortcut icon" href="//favicon.ico?v=2">
should be
<link rel="shortcut icon" href="favicon.ico?v=2">
You can do center crop image so that each center part of image is shown amd it will also make sure that your image is neither pixelated nor stretched
Img {
Object-fit: cover;
Object-position: center;
}
** UPDATE: I went to the settings at which my PDF was being rendered, and changed size to "Letter" instead of "A4" **
So DOMPDF is supposed to render an html page, yet with the settings I have, it's not rendering the background image to be margin-less (the bottom and right side still have margins).
Here's my css code on the HTML page being rendered:
#page { margin: 0px 0px 0px 0px; }
body {
background-image: url(../../picture.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
Yet When rendered as PDF, here's how it looks:
It might be doing this based on the settings that it outputs as, but I'm not sure. It's being rendered as an 'A4' paper, as 'portrait' layout.
How would I be able to make the margins go away, so that it stretches all the way horizontally and vertically?
Dompdf (up to and including 0.7.0) does not currently support the background-size CSS declaration. Until that is fully supported by dompdf you can position an image using fixed positioning. You need to know the dimensions of the page and the margins, so you might want to declare those in your styling.
Try this in 0.6 or newer:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
#page {
size: 8.5in 11in;
margin: .5in;
}
#bgimg {
position: fixed;
left: -.5in;
top: -.5in;
width: 8.5in;
height: 11in;
z-index: -999
}
</style>
</head>
<body>
<img src="picture.jpg" id="bgimg">
</body>
</html>
I have an inner of fixed width containing the content of variable size. I want the height of that inner-container to be as big as the content, and at least as big as the screen's height (when the content is smaller). The page also has a fixed size footer.
Normally I'd think of setting min-height: 100% to both inner and outer (root) containers, but that doesn't work in CSS.
The code I present below is a simplified example of the situation I have on a bigger page (with much more various elements in the root-container). A green inner-container is not filling the entire screen's height as I'd like it to be. I did manage for it to do so (for example by setting root-container's height instead of min-height, but then the rendering behaved wrongly when the content was bigger than the screen's height (you can quickly simulate that by changing the font-size to a bigger value, like 21px). I want to have it working (the green column filling at least the screen's height, black on it's both sides throught the whole height and the footer on the very bottom) in both cases.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
}
#root-container {
min-height: 100%;
background: black;
color: white;
margin-bottom: -200px;
}
#root-container:after {
height: 200px;
content: "";
display: block;
}
#inner-container {
min-height: 100%;
width: 400px;
background: green;
color: white;
font-size: 11px;
margin-left: auto;
margin-right: auto;
}
#footer {
height: 200px;
background: orange;
color: black;
}
h1 {
margin-top: 0;
}
</style>
</head>
<body>
<div id="root-container">
<div id="inner-container">
<h1>Content</h1>
And when the body finally starts to let go<br/>
let it all go at once<br/>
not piece by piece<br/>
but like a whole bucket of stars<br/>
dumped into the universe<br/>
Whoh! Watcb it go!<br/>
Good-bye small hands, good-bye small heart<br/>
good-bye small head<br/>
My soul is climbing tree trunks<br/>
and swinging from every branch<br/><br/>
They're calling on me<br/>
they're calling on me<br/><br/>
Do you think I'm an animal?<br/>
Am I not?<br/>
Do you like fur<br/>
Do you wanna come over<br/>
Are we captive only for a short time<br/>
Is there splendor, I'm not ashamed<br/>
Desire shoots through me<br/>
Like birds singing<br/>
(The way you move no ocean's waves were ever as fluid)<br/><br/>
They're calling on me<br/>
they're calling on me<br/>
I hit the mark!<br/>
I target moon, I target sky, I target sun<br/>
Fall down on the world before it falls on you<br/><br/>
Like beggars, like Stars<br/>
like whores, us all<br/>
Like beggars, like dogs<br/>
Like Stars, us all<br/><br/>
Shoot straight for my heart<br/>
(And when you were near no sky was ever quite so clear)<br/><br/>
Like stars, so small<br/>
Like us, when we fall<br/>
Like beggars, like whores<br/>
Like lovers, Get Up!<br/>
Get up, too far
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
And the same example uploaded to JSFiddle: http://jsfiddle.net/gNT8m/
This is a bug: children of parents with min-height can't inherit the height property.
There are many potential workarounds, but you're right that this should work the way you initially tried.
Update:
As to workarounds, the simplest that occurs to me is to set display: flex on your #root-container. I haven't cross-browser tested this solution, so you might want to investigate it further, but using flexbox is a good way to go.
See it working.
You'll want to add a few other niceties, like adding position: relative to your footer and adding some space (padding: <your footer's height>px) to your #inner-container to make sure your footer doesn't cover up any content.
I'm trying this technique on a page. Used it before and it seemed to work fine, but now in Chrome and Firefox, no horizontal scroll bar is displayed (which is good) but horizontal scrolling still occurs on two-finger swiping (which is bad).
I found this bug report which describes the same behavior, but is marked resolved. I tested in Safari, and horizontal scrolling was prevented.
The code (virtually identical to the code from the CSS-Tricks example):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body {
overflow-x: hidden;
}
h1 {
position: relative;
background: hsla(0,0%,0%,0.8);
color: white;
width: 90%;
margin: 0 auto;
}
h1:before, h1:after {
content: "";
position: absolute;
background: hsla(0,0%,0%,0.8);
top: 0;
bottom: 0;
width: 9999px;
}
h1:before {
right: 100%;
}
h1:after {
left: 100%;
}
</style>
</head>
<body>
<h1>Title of Page with full browser width bars</h1>
</body>
</html>
Any help greatly appreciated.
EDIT: Adding in overflow-x to the html element does prevent horizontal scrolling, but sometimes leads to other display errors (on a more fleshed out page I made, a dropdown menu kept getting cut off, even though that should be an overflow-y thing) and doesn't explain why the scrollbar isn't there, but scrolling still works.
I know this question was asked a long time ago but hopefully this helps somebody. Try adding the overflow-x hidden style to the html tag as well, for example:
html, body{
overflow-x:hidden;
}