I am working on a template and I can’t understand one thing, more precisely why it happens I understand, but how to do it cross-browser?
There is a fixed block, initially the scroll in it is not available, but an empty scroll bar is displayed (from the body) so that the image does not jump into the carousel. Then, when clicking, the scrollbar is replaced and the scrollbar of this block (.content-wrapper) is displayed
However, this only works in Chrome, in other browsers the scrollbar (.content-wrapper) disappears under the carousel ...
Is there a cross-browser solution?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<style>
html,
body {
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
body {
overflow-y: scroll;
}
body.scroll {
overflow-y: hidden;
}
.content-wrapper {
height: 100%;
min-height: 100%;
width: 100%;
position: fixed;
}
body.scroll .content-wrapper {
overflow-y: scroll;
}
.carousel-wrapper {
position: fixed;
width: 100%;
height: 100%;
min-height: 100%;
z-index: 1;
background-color: black;
}
.content {
position: relative;
background-color: rgba(241, 156, 187, 0.5);
}
</style>
</head>
<body onclick="this.setAttribute('class', 'scroll')">
<div class="content-wrapper">
<div class="carousel-wrapper">
<div class="cover"></div>
<div id="carouselSlides" class="carousel slide carousel-fade align-self-sm-center align-self-md-start"
data-ride="carousel" data-interval="7500"
data-pause="false">
<div class="carousel-inner">
<div class="carousel-item active"><img
src="https://store-images.s-microsoft.com/image/apps.18496.14408192455588579.aafb3426-654c-4eb2-b7f4-43639bdd3d75.2c522ca4-9686-4ee2-a4ac-cdbfaf92c618?mode=scale&q=90&h=1080&w=1920"
class="d-block min-vw-100" alt="">
</div>
<div class="carousel-item"><img
src="https://149351115.v2.pressablecdn.com/wp-content/uploads/2018/12/Stack-Gives-Back-2018-.png"
class="d-block min-vw-100" alt="">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="content" style="height: 10000px">
content
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
So, I achieved the desired result, almost 100%, as usual IE does a feint ...
Tell me, who faced this behavior, is there a hack for him?
When scrolling down, a fixed block leaves 1px, only in IE (Edge)
Layout corrections:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<style>
html,
body {
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
body {
position: fixed;
overflow-y: scroll;
width: 100%;
}
body.scroll {
position: relative;
}
.carousel-wrapper {
position: fixed;
z-index: 1;
}
</style>
</head>
<body>
<div class="carousel-wrapper">
<div class="cover"></div>
<div id="carouselSlides" class="carousel slide carousel-fade align-self-sm-center align-self-md-start"
data-ride="carousel" data-interval="7500"
data-pause="false">
<div class="carousel-inner">
<div class="carousel-item active"><img
src="https://store-images.s-microsoft.com/image/apps.18496.14408192455588579.aafb3426-654c-4eb2-b7f4-43639bdd3d75.2c522ca4-9686-4ee2-a4ac-cdbfaf92c618?mode=scale&q=90&h=1080&w=1920"
class="d-block min-vw-100" alt="">
</div>
<div class="carousel-item"><img
src="https://149351115.v2.pressablecdn.com/wp-content/uploads/2018/12/Stack-Gives-Back-2018-.png"
class="d-block min-vw-100" alt="">
</div>
</div>
</div>
</div>
<div class="content-wrapper container-fluid">
<div class="content" style="height: 10000px">
content
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
$('body').on('click', function () {
$(this).toggleClass('scroll');
});
</script>
</body>
</html>
Related
html,
body {
height: 100%;
margin: 0px;
}
.container {
display: flex;
width: 100%;
height: 100%;
background-color: yellow;
}
.box {
flex-shrink: 0;
}
<div>
<div class="container">
<div class="box">
<h1>A</h1>
<p>clap</p>
</div>
<div class="box">
<h1>W</h1>
<p>clap</p>
</div>
<div class="box">
<h1>S</h1>
<p>clap</p>
</div>
<div class="box">
<h1>D</h1>
<p>clap</p>
</div>
<div class="box">
<h1>Q</h1>
<p>clap</p>
</div>
<div class="box">
<h1>E</h1>
<p>clap</p>
</div>
<div class="box">
<h1>R</h1>
<p>clap</p>
</div>
</div>
</div>
how to (.containeri) full screen with flex display?
I want full window full height and width with flex?
I use height 100% but it is not full window with flex property.but in grid it is 100% window with height anf width
It looks like you need to set shrink to 0 to prevent the flex items from shrinking:
.container {
display: flex;
width: 100%;
height: 100%;
background-image: url("asso-myron-HZCBJmlUPas-unsplash.jpg");
}
.flex-item {
flex-shrink: 0;
}
An example:
.flex-container {
display: flex;
width: 100%;
height: 100%;
}
.flex-item {
flex-shrink: 0;
}
<div class="flex-container">
<div class="flex-item">
1
</div>
</div>
Try these codes.
body {
margin:0;
}
.container {
height:100vh;
background-repeat:no-repeat;
background-size: 100% 100%;
object-fit:cover;
display: flex;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxD1r0WianEq0iQy_H8INxLhdpmcz6c_DslA&usqp=CAU");
}
<body>
<div class="container"></div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="d-flex p-3 bg-secondary flex-shrink-0 text-white">
<div class="p-2 bg-info">Flex item 1</div>
</div>
</body>
</html>
I think you want this.
If not then Kindly attach html code.
Code sandbox:
https://codesandbox.io/s/polished-browser-d5qrr?file=/index.html:0-1902&fbclid=IwAR3LXPTNfumRyitqed-xzOJHEeq5PBTuLnU-V0LH-4UB8QIbPdb_hZKL1G0
How to fill image to 100% height of the parent div? Ratio width: height should stay the same.
Here is a possible solution for your question I hope it can help
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<style>
html,
body {
height: 100%;
}
.custom-container {
position: relative;
max-width: 800px;
max-height: 400px;
width: 70%;
height: 60%;
border: 2px solid red;
}
.mid {
border: 2px solid green;
}
.flex-grow-1 {
position: relative;
min-height: 100px;
max-height: 100%;
}
.img-container {
position: relative;
height: 100%;
}
.flex-grow-1,
.img-container,
img {
width: 100%;
max-height: 300px;
object-fit: cover;
}
div>img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
</style>
<title>Document</title>
</head>
<body>
<div class="custom-container d-flex flex-column">
<div class="top">
<h1>Nadpis</h1>
</div>
<div class="mid flex-grow-1">
<div class="img-container">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1"
alt="img" />
</div>
</div>
<div class="bottom">
<button class="btn btn-primary">Dalej</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
You want the img to fill the height of its container which has class .img-container.
At the moment you have set the width and height of the img element to 100px. This gives a small image and one that may be distorted if the original is not square.
To make the image fill the full height but keep its original aspect ratio replace the .img-container img CSS settings with:
.img-container img {
height: 100%;
width: auto;
}
This may not be what you want if some of your images are more landscape than portrait for example. Depending on the image aspect ratios compared to the container's you may get the image cut off at the sides.
If you want to ensure that you always show exactly the whole image then investigate object-fit: contain This may give you white space either top and bottom or at the sides if the ratios don't match.
If you want to always fill the container, but without image distorion then investigate object-fit: cover. This will cut off top and bottom or the sides if it has to. You will need also to look at positioning, often center will do what is needed but may not work for all your images.
This is correct answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
html,body{
height: 100%;
}
.custom-container{
max-width:800px;
max-height:400px;
width:70%;
height:60%;
border: 2px solid red;
}
.mid{
border:2px solid green;
min-height:0;
}
img{
max-height:100%;
max-width: 100%;;
}
#problem{
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div class="custom-container d-flex flex-column">
<div class="top">
<h1>Nadpis</h1>
</div>
<div class="mid flex-grow-1 d-flex">
<div id="problem" class="w-100" >
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1" alt="img">
</div>
</div>
<div class="bottom">
<button class="btn btn-primary">Dalej</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I'm working on learning bootstrap and I would like to have a website with a header, a footer, and three middle columns. So far I have the header and columns, but I'm not fully understanding how to make the the footer, and I'm pretty sure I did it the wrong way, but I would like some assistance figuring it out. I tried putting it in a div and changing the width to 100 vw and I'm just not fully understanding it. The header is basically just the container fluid part on top and I made a div for the footer but the edges still are the color of the container, So I guess my question is: what is the exact purpose of container and container-fluid and how do I make the footer div take up the whole space? Thanks, Code is:
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: calc(100vh - 200px);
}
#main {
background-color: lime;
}
#main_head {
height: 200px;
color: red;
margin: 0;
}
#main_foot {
height: 200px;
background-color: pink;
margin: 0;
color: red;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
</body>
</html>
container-fluid takes the full width of the screen while container has fixed size for each resolution.
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: calc(100vh - 200px);
}
#main {
background-color: lime;
}
#main_head {
height: 200px;
color: red;
margin: 0;
}
#main_foot {
height: 200px;
background-color: pink;
margin: 0;
color: red;
position: absolute;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
</body>
</html>
I want to overlap the two images such that the bottom image comes up to the top image.
Here is the code
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.col-md-6{
margin: 1px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6"><img src="top-header-1.png"></div>
<div class="col-md-6"><img src="Base-BG_4.png"></div>
</div>
</div>
</body>
</html>
here is the attached screenshot
I want to be like this
You need to just add position:absolute; with position:relative as i used
.col-md-6{
margin: 1px;
}
.picContainer {position:relative;}
.pic2 {position:absolute; top:0px; left:0px;}
<href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<div class="container-fluid picContainer">
<div class="row">
<div class="col-md-6"><img src="http://www.qygjxz.com/data/out/114/4676052-image.png"></div>
<div class="col-md-6 pic2"><img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg"></div>
</div>
</div>
</body>
</html>
Even though you can use absolute positioning for your requirement, I don't think it is the best way now. You can achieve it using simple margin adjustments.
I hope this is something that you are looking for.
HTML
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
<div class="image-container">
</div>
</div>
CSS
.header {
width: 800px;
height: 200px;
background-image: url('http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg');
background-size: cover;
background-position: center;
}
h1 {
text-align: center;
color: #fff;
}
.image-container {
width: 600px;
margin-left: 100px;
margin-top: -50px;
height: 200px;
background-image: url('https://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg');
background-size: cover;
background-position: center;
}
Refer the codepen sample
I am newbie with CSS; so, I do not want to use CSS frameworks.
After reading some questions about fixed header and footer with CSS (on StackOverflow), I tried to create a HTML layout, as this:
In this layout, both header and menu are fixed.
I have created an HTML file with 2 column: left for menu, right for content. But, it comes with an scrolled-menu:
#menu {
width: 33%;
height: 100%;
float: left;
}
#page {
width: 66%;
height: 100%;
float: left;
}
#header {
width: 100%;
height: 100px;
position: fixed;
}
#content {
width: 100%;
position: absolute;
top: 100px;
}
#footer {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}
<div id="menu">
MENU
</div>
<div id="page">
<div id="header">Header</div>
<div id="content">
<p>Some content...</p>
</div>
<div id="footer">Footer</div>
</div>
When I add this line: position: fixed; in #menu, the layout will be broken. Could help help me to fix it?
Currently you could use the Tag directly as <header> <body> <footer> you need to establish position : block. I would like to recommend that you uses a Framework like Bootstrap, today is commonly uses for design webpages, if you are new un webpages it Will be useful for you
http://getbootstrap.com/
<!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">
<title>Example of Bootstrap 2 Unequal Column Layout for Tablets and Desktops</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.row > div{
margin-bottom: 15px;
}
.header{
min-height: 90px;
}
.footer{
min-height: 60px;
}
.header, .footer{
background: #2f2f2f;
}
.sidebar{
background: #dbdfe5;
}
.content{
background: #b4bac0;
}
.sidebar, .content{
min-height: 300px;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="header"></div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="sidebar"></div>
</div>
<div class="col-sm-9">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="footer"></div>
</div>
</div>
</div>
</body>
</html>