My parent div has a variable height depending on the size of the window.
I have an #image-container and a #second-container that I am trying to fit inside my parent div. My #second-container is also a variable height depending on the screen size and I am trying to get it to affix to the bottom of the parent container.
Right now I am accomplishing this via javascript but I was wondering if there was anyway to do this using pure css.
function resize() {
var header_height = $("#header").height(),
second_container = $("#second-container").height(),
image_container = $("#image-container").height();
document.getElementById('image-container').style.height = header_height - second_container +'px';
}
resize();
$( window ).resize(function() { resize(); });
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
* { margin:0; padding:0 }
#header {
background-color:#f0f0f0;
height:100vh;
}
#image-container {
background-image:url('https://images.unsplash.com/photo-1428509774491-cfac96e12253');
background-size:cover;
background-position:center;
height:50vh;
}
#second-container {
font-size:0;
}
.grid {
vertical-align:top;
display:inline-block;
width:25%;
}
.box {
padding-bottom:56.25%;
border:1px solid #232323;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="image-container"></div>
<div id="second-container">
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
</div>
</div>
The solution would be to make the position of the header relative and the position of the container absolute and fixed to the bottom. This can be achieved by adding the following to your css:
CSS:
#header{
position: absolute;
}
#second-container{
position:absolute;
bottom:0;
}
Edit:
If you want to do this without absolute positioning the solution would be to make the image an object rather than a background. Here is a JSFiddle that shows this. You will have to modify the height/width some but this should solve your problem.
HTML:
<div id="header">
<div id="second-container">
<div class="image"><img src="https://images.unsplash.com/photo-1428509774491-cfac96e12253"></div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
<div class="grid">
<div class="box"></div>
</div>
</div>
</div>
CSS:
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0
}
#header {
background-color: #f0f0f0;
height: 100vh;
/* position: relative; */
/* background-image: url('https://images.unsplash.com/photo-1428509774491-cfac96e12253'); */
/* background-size: cover; */
/* background-position: center; */
}
img{
height:100vh;
object-size:contain;
}
#second-container {
font-size: 0;
position: relative;
left: 0;
bottom: 0px;
width: 100%;
z-index: 100
}
.grid {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: #ddd;
margin:0;
}
.box {
box-shadow: 0 0 0 1px #232323 inset;
height: 80px;
}
Related
I made a mobile web page using IScroll.
The composition of the web page is as follows.
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item">
<div class="disable">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
If you run the code above,
You can scroll by raising the cursor to A and B.
On mobile, you can scroll using touch.
But, So if you raise your cursor over a DIV with Aqua background color and scroll,
I can't scroll.
The DIV, "Position:Fixed," is...
Since the height is 100%, I don't think there's a scroll event.
For your information, Item needs a Click event.
So the "Pointer-Events: None" property is not allowed.
The "Trigger" function can't even give you an event.
Give me an idea.
https://jsfiddle.net/kasthe/b3w2hpn1/3/
Apply pointer-events: none to just the class=disable div. div class=item is still clickable.
$(".wrap").css("height", $(document).height() + "px");
console.log($(".wrap").height())
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item" onclick="alert('item clicked')">
<div class="disable" style="pointer-events:none">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
I'm trying to fill my page horizontally with as many blocks as possible and center the result.
I want the grid to be able to resize when the window becomes smaller:
wide window
xxx
small window
xx
x
Is this possible to achieve without javascript?
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
To explain the desired centering visually:
Can the yellow highlighted area be evenly distributed on either side?
The desired box alignment:
This only works in chrome for some reason.
Auto-fit and auto-fill needs a known width to calculate from, we can do that with max-width:100% instead of using width which will stretch it and prevent us from centering, and avoid fixed widths.
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
max-width: 100%;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
There is a quirk with this, if you start with a wide viewport then resize it to a smaller one, the grid won't be centerd because of auto-fill
Say you have 3 elements but the container can fit 4 with auto-fill it will create a forth column but we have no forth element so it will look unevenly spaced.
I suggest using auto-fit, which instead of creating the forth column it will split the space evenly on each side.
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
max-width: 100%;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Now if you resize the window enough you'll see sometimes it's not evenly spaced that's because of the relative unit on the max-width, it need to recalculate the width because it's based on the parent and parent's width which is based on the content.
we can trigger that recalculation using an animation.
chrome specific solution
.center {
display: flex;
flex-direction: column;
align-items: center;
}
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
max-width: 100%;
animation: recalc 5s linear infinite;
}
#keyframes recalc {
to {
max-width: 99.9%;
}
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
To support at least FF and maybe some other browsers, use viewport units.
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
max-width: 100vw;
margin:0 auto;
}
.center {
display: flex;
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Try this with flexbox.
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: flex;
justify-content: center;
align-items: center;
}
#media screen and (max-width: 767px) {
.grid {
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 50%
}
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
I wouldn't use grid for this. Use flex:
*{
box-sizing:border-box; padding:0; margin:0; font-size:0;
}
html,body{
width:100%; height:100%; background:#ccc;
}
.box{
width:200px; height:150px; background-color:white; border:6px solid red;
}
.box:nth-child(2n+2) {
background-color:blue;
}
.center,.grid{
display:flex; align-items:center; justify-content:center; height:100%;
}
.grid{
min-width:600px; flex-wrap:wrap; align-items:center;
}
<div class='center'>
<div class='grid'>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
</div>
</div>
Yes, you can centre an auto-fill, left-aligned grid (and it works in Firefox).
To do this, you just need justify-content: center; on the grid container, which would give you this:
A good example of this (and why it works) is on the MDN docs page for justify-content
Your example would look like this:
.box {
box-sizing: border-box;
width: 200px;
height: 150px;
background-color: white;
border: solid 6px red;
}
.box:nth-child(2) {
background-color: blue
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
justify-content: center; /* <-- This is all you need to add */
}
<div class="center">
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
It's worth noting though, that when you only have one row of boxes, they may not be centred, since the repeat function will create empty columns to fill the row, effectively left aligning the actual boxes:
I have a simple flexbox layout like this...
html, body {
margin:0;
padding:0;
}
.container {
display:flex;
flex-direction:row;
}
.section1 {
width:50%;
}
.section2 {
width:50%;
}
.img_16x9_holder {
display: block;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
img {
max-width:100%;
}
<div class="container">
<div class="section1">
<div class="img_16x9_holder">
<img src="http://lorempixel.com/g/800/800/" alt="800x800image">
</div>
<div class="section2">
<div class="img_matchheight_holder">
<img src="http://lorempixel.com/g/300/650/" alt="300x650image">
</div>
</div>
</div>
I am trying to set the left image to a 16x9 ratio and then the right hand one should crop and fill to match the height of the left.
This is what I am trying to achieve..
Can I do this using CSS alone, or am I best off looking at a javascript height matching solution?
You can have more info here
Here is an example:
html, body {
margin:0;
padding:0;
}
.container {
display:flex;
}
.section img{
height:100%;
}
#sec-1 img{
/*resize image with % or fixed width depending on the image size*/
width:50%;
}
#sec-2 img{
/*resize image with % or fixed width depending on the image size*/
width:50%;
}
<div class="container">
<div id="sec-1" class="section">
<img src="http://lorempixel.com/g/800/800/" alt="800x800image">
</div>
<div id="sec-2" class="section">
<img src="http://lorempixel.com/g/300/650/" alt="300x650image">
</div>
</div>
You can consider background for the second image:
html,
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
}
.section1 {
width: 50%;
}
.section2 {
width: 50%;
}
.img_16x9_holder {
display: block;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
.img_matchheight_holder {
background-size: cover;
background-position: center;
flex-grow:1;
margin-left:5px;
}
img {
max-width: 100%;
}
<div class="container">
<div class="section1">
<div class="img_16x9_holder">
<img src="http://lorempixel.com/g/800/800/" alt="800x800image">
</div>
</div>
<div class="img_matchheight_holder" style="background-image:url(http://lorempixel.com/g/300/650/)">
</div>
</div>
I have some weird problem with my webpage.
I made a simple website, where there is a background image, covering the webpage, header on it with logo and menu icon... the menu icon and the menu worked, until now... I made two divs, with height:100vh; and they are 100vh from the top of the webpage... it looks great, but the menu is not working.. how, why?
for better understanding.. here is link to the site: http://david.addagio.cz/own/
ok.. so there is the code:
css:
html {
background: url(bistro2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {margin: 0;
padding: 0;
}
a{
text-decoration:none;
z-index:10;
}
#header {
background-color: none;
height: 110px;
width: 100%;
top:0px;
position: fixed;
}
h1 {
z-index:10;
color:white;
font-size: 35px;
padding: 0;
margin: 0;
font-family:Segoe UI Light;
padding-bottom:10px;
}
h2 {
color:white;
font-size: 22px;
padding: 0;
margin: 0;
font-family:Segoe UI Light;
line-height:50px;
z-index:10;
}
#head{
border-bottom:2px solid white;
margin-bottom:50px;
}
#menu{
margin-bottom:10px;
}
#social_icons{
height:570px;
background-color: rgba(0,0,0,0.1);
}
#main{
float: left;
}
#main img {
width:60px;
height:27px;
padding:45px;
}
#share{
float: right;
}
#share img {
padding:45px;
width:30px;
height:16px;
padding-top:50px;
}
.menu {
background-color: rgba(0,0,0,0.7);
top:0;
right: -400px;
height: 100%;
position: fixed;
width: 400px;
z-index:-10;
}
#third {
background-color:#E8E8E8 ;
}
#second, #third {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
}
#second {
background-color:#F0F0F0 ;
margin-top:100vh;
}
html:
<!DOCTYPE html>
<html>
<head>
<title>UX design</title>
<link href="styles_m.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
</head
<body>
<div class="menu">
<div id="wrapper">
<div id="head">
<h1>Menu</h1>
</div>
<div id="menu">
<h2>O mě</h2>
<h2>Proč si mě vybrat</h2>
<h2>Portfolio</h2>
<h2>Ukázky prací</h2>
<h2>Objednávkový formulář</h2>
</div>
<div id="head">
<h1>Sociální sítě</h1>
</div>
<div id="social_icons">
</div>
</div>
</div>
<div id="header">
<div id="main">
<img src="my_logo.png">
</div>
<div id="share">
<img name="menu" src="my_menu.png">
</div>
</div>
<div class="wrapper">
<div id="second">
</div>
<div id="third">
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
</script>
</body
</html>
The menu script is working properly. You have to set a top property for the .menu class:
.menu{
...
top: 0;
...
}
One of those added, new divs is now covering up the menu but you have changed the markup as I write this and can't help with the answer. However, this is a typical problem when floated or absolutely positioned elements rise up into a position that covers up another element.
EDIT: In fact, that's the case. position:fixed for the header is the same as being absolutely positioned. Then your menu and logo are both floated. These all take those items out of the normal flow which is allowing your new divs to cover them up.
I have a slideshow with pager and some buttons next to pager of slideshow (here is html page) which I am trying to make responsive.
The images I am fetching from database. So that are varying in number.
The problem is that pager/navigation of slideshow is fine for less number of images but becomes problematic for more images. Pager is overlapping the buttons which are next to it. as shown below:
For Desktop screen:
For small screen:
Below is the div structure
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div> <!-- pager -->
</div>
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
I am finding the solution other than media queries if possible. I tried by giving width in % to all div, by putting container div to above structure and giving it 100% width and height, by $(width).width() function. But not getting the solution.
jsfiddle
Is there any way to dynamically adjust the width of div depending on browser's screen size?
You can use the #media queries. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (max-width: 300px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
...
</body>
</html>
This will change the background color of the body to lightblue. But when you resize your browser window to less than 300px it will change to lightgreen. I hope this will help you with your problem.
Here is simple solution using CSS and HTML, no #media queries no JavaScript,
I just modified some lines of HTML and CSS to your code those are below.
HTML
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div>
</div>
<div class="buton-controls">
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
</div>
css
/* I wanted to center my loader */
#cycle-loader {
height:32px;
left:50%;
margin:-8px 0 0 -8px;
position:absolute;
top:50%;
width:32px;
z-index:999;
}
/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
#maximage {
display:none;/* Only use this if you fade it in again after the images load */
position:fixed !important;
}
#arrow_left, #arrow_right {
bottom:45%;
height:67px;
position:fixed;
right:3%;
width:36px;
z-index:1000;
}
#arrow_left {
left:3%;
}
#arrow_left:hover, #arrow_right:hover {
bottom:45%;
}
#arrow_left:active, #arrow_right:active {
bottom:45%;
}
a {color:#666;text-decoration:none;}
a:hover {text-decoration:underline;}
/*I want to style my pager*/
#cycle-nav {
/* float:left;*/
margin-top: 8px;
margin-left: 0;
text-align: center;
}
#cycle-nav ul {
list-style-type:none;
width: 100%
}
#cycle-nav ul li {
/* border:1px solid #FF8000;*/
display: inline-block;
margin:3px;
}
#cycle-nav ul li a {
/*background: #057c96;*/
background: #49BED8;
float:left;
height:10px;
margin:2px;
width:10px;
}
#cycle-nav ul li a:hover {
background: #000;
opacity:0.6;
}
#cycle-nav ul li.activeSlide {
/* border:1px solid #000;*/
/* background: #075262;*/
}
#cycle-nav ul li.activeSlide > a {
background: #075262;
}
#controls-wrapper { margin:0 auto; height:42px; width:100%; bottom:70px; z-index:4; background:url(../img/nav-bg.png) repeat-x; position:fixed; }
#controls { width: 50%; float: left; }
.buton-controls{
width: 50%;
float: left;
text-align: center;
}
.buton-controls > div{
display: inline-block;
}
.button2{
background-color: red;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
text-align: center;
width: 70px;
color:#FFFFFF;
}
.button2:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
}
.button2hoverBg{
background-color:#137087 !important;
cursor:pointer;
opacity:1;
}
.button3{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
position: relative;
text-align: center;
z-index: 10;
width: 70px;\
}
.button3:hover, a:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
text-decoration:none;
color:#FFFFFF;
}
.button3 a{
color:#FFFFFF;
text-decoration:none;
}
.button1{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L600wt',Arial,sans-serif;
height: 20px;
text-align: center;
width: 70px;
z-index: 10;
opacity: 0.4;
}
.button1 a{
color:#FFFFFF;
text-decoration:none;
}
Yes, use the vw and vh CSS properties.
1vw = 1% of window width,
1vh = 1% of window height.
http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design