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.
Related
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>
All my searches tell me to make the img {max-height: 100%} but that doesn't seem to have any effect.
I don't understand if I've set the height of the parent container (earth-block), why setting the img height won't constrict the image to that size.enter image description here
.earth-block {
height: 200px;
}
.earth-block img{
max-height: 100%;
}
<div class="earth">
<div class="wrapper">
<div class="earth-block"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZj1KyXPz468xvFWikAXA-dPkMu14q-XuB3dKKl9LF6Bl4SO-oTw&s" alt="earth"></div>
</div>
</div>
this ll help you out
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.earth-block {
height: 200px;
background-color: aliceblue;
display: flex;
}
.earth-block img{
flex-grow: 100;
object-fit: none;
object-position: center;
}
</style>
</head>
<body>
<div class="earth">
<div class="wrapper">
<div class="earth-block"><img src="https://cdn.pixabay.com/photo/2016/10/20/18/35/sunrise-1756274__340.jpg" alt="earth"></div>
</div>
</div>
</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 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>
I have a fixed header and right aside of 260px. I have three columns with height 100%.The content area to be a fluid-container that is 12 column wide.
<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
Below is the fiddle i am working on. The width of the cols are breaking with the layout.
http://codepen.io/anon/pen/qxusJ
Not really clear what you mean by The width of the cols are breaking with the layout.
Try it this way :
html, body, .container {
height:100%;
width:100%; /*keep html and body 100% */
margin:0;
background:lightgray
}
.container {
display:table;
width:calc(100% - 260px);/*keep container 100% - 260px */
border-spacing:0.5em;
}
I don't quite understand; you want the container to be fluid, but then you have columns within it that have a fixed width?
How you could do it is:
<div class="header"></div>
<div class="container">
<div class="secondary-aside"></div>
<div class="content">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
With the following CSS:
html, body {
height: 100%;
}
.header {
height: 60px;
background: blue;
width: 100%;
}
.container {
overflow: auto;
height: 100%;
}
.secondary-aside {
width: 25%;
float: right;
background: red;
height: 100%;
}
.content {
width: 75%;
float: left;
background: #777;
overflow: auto;
height: 100%;
}
.col-sm-4 {
height: 100%;
background: yellow;
width: 33.3333%;
float: left;
}
Would that help?
I don't understand why you use so much of custom styles in BS.
Check the responsiveness of the page in http://www.responsinator.com/
Check this out.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.secondary-aside {
width: 25%;
float: right;
background: #000000;
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="header">i am the header</div>
<div class="secondary-aside col-sm-4">ff</div>
<div class="col-sm-8">
<div class="col-sm-4" style="background-color: red">r</div>
<div class="col-sm-4"style="background-color: green">g</div>
<div class="col-sm-4"style="background-color: blue">b</div>
</div>
</div>
</body>
</html>