I'm practising with JavaScript and hiding the image and the button. The footer keeps coming to the top of the page every time I execute the command. How can I correct this? I've tried many different options and I can't seem to get it to work right like position: sticky, bottom:0; for example.
I'm extremely new to this coding thing so I'm pretty sure I have no idea what I'm doing.
jQuery(document).ready(function() {
$(".myButton").click(function(){
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function(){
$(".poem").hide();
$(".resize").hide();
})
})
#charset "utf-8";
/* CSS Document */
.main-image {
display: block;
width: 25%;
margin-bottom: 30px;
}
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
.overlay-content {
position: absolute;
bottom: 15%;
text-align: center;
width: 25%;
}
.resize {
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
footer {
background-color: brown;
border: solid;
position: sticky;
bottom: 0;
}
.myButton {
margin-left: 50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>practice_overlay</title>
<link href="Overlay.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script_storage.js"></script>
</head>
<body>
<div class="container">
<p class="introduction">Lorem Ispum</p>
<img class="main-image" src="Devry Web Design Intro Course/Pictures/crystal-tear-3.jpg">
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
<footer>Lorem Ispum</footer>
</body>
</html>
You could use CSS grid - with the setup in the snippet below, you can "safely" work inside the div.outer part of the layout, without making the other parts of your page "jumping around" :)
jQuery(document).ready(function() {
$(".myButton").click(function() {
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function() {
$(".poem").hide();
$(".resize").hide();
})
})
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
display: grid;
grid-template-rows: calc(100vh - 30px) 30px;
grid-template-columns: 100%;
}
.outer {
background: gray;
padding: 8px 16px;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.container {}
#image {
height: 30px;
width: 30px;
}
.myButton {
margin: 0 auto;
}
footer {
background-color: brown;
padding: 8px 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div class="outer">
<div class="container">
<p class="introduction">Introduction</p>
<img id="image" src="https://picsum.photos/30" alt="small image" />
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
</div>
<footer>
footer
</footer>
</div>
Related
I have this web page in construction, that should have a button that displays more buttons, but for some reason I don't know, these on hover hidden buttons don't appear (I've used this: https://es.stackoverflow.com/questions/126579/como-se-crea-un-bot%c3%b3n-que-despliegue-mas-botones). Any one know how to make this buttons appear? it seems to work fine with the snippet, then: what can be the problem? I whant it to be in separated files.
var flag = false;
$("#botones").mouseenter(function() {
if (!flag) {
flag = true;
$("#resto").show(200, function() {
flag = true;
});
}
}).mouseleave(function() {
$("#resto").hide(200);
});
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
position: static;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
display: grid;
}
div#tablas {
width: 100%;
order: 1;
}
div#carpetas {
width: 100%;
order: 2;
}
}
<!doctype html>
<html lang="es">
<head>
<title>Viewer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index_style_viewer.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="botones.js"></script>
</head>
<body>
<div id="general">
<div id="enlaces">
</div>
<div id="tablas_carpetas">
<div id="tablas">
</div>
<div id="carpetas">
<div id="botones" onmouseover="">
<button id="principal_1">Redes Sociales</button>
<div id="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div id="anuncios">
</div>
<div id="pie">
</div>
</div>
</body>
</html>
you have issue with your js condition i simply tried with jquery it works perfectly
$(document).ready(function(){
$("#botones").mouseenter(function(){
$("#resto").show();
});
$("#botones").mouseleave(function(){
$("#resto").hide();
});
});
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
position:static;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
display:grid;
}
div#tablas {
width: 100%;
order: 1;
}
div#carpetas {
width: 100%;
order: 2;
}
}
<!doctype html>
<html lang="es">
<head>
<title>Viewer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="general">
<div id="enlaces">
</div>
<div id="tablas_carpetas">
<div id="tablas">
</div>
<div id="carpetas">
<div id="botones">
<button id="principal_1">Redes Sociales</button>
<div id="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div id="anuncios">
</div>
<div id="pie">
</div>
</div>
</body>
</html>
My small library has a website that was created in HTML and CSS by a previous employee. I know the the display of the site is dynamic based on screen size-- the mobile site is slightly different from the desktop site. It appears he used some libraries from JQuery, too. I have a very limited background in coding, so I make only minor content changes and NO functional changes. At some point, while I was on vacation, the footer of our website stopped displaying in the desktop version of the site, but it still shows in the mobile site.
I have audited the HTML and CSS files against the archived files to be sure I didn't inadvertently make any changes before I left. I have checked the versions of files that are rarely used and noticed they haven't been changed since 2017. I commented out the CSS and ran just the HTML locally to see if there was a stylesheet difference I was missing (though I haven't edited them), but I couldn't get anything to display in the footer. The footer has a widget that displays one iframe with a link to another website, a second iframe with a link to a calendar, and a group of icons with links to our partners. Again, everything worked fine until a month ago on the mobile and desktop sites, and I can view the footer if I resize my desktop browser to something very narrow.
Here's the relevant HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109165971-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-109165971-1');
</script>
<meta charset="UTF-8">
<meta name="msvalidate.01" content="63DD6F645CCF71531665417F6978B20A" />
<title>Welcome to the Toccoa-Stephens County Public Library</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Welcome the Toccoa Stephens County Library! Celebrating 80 years of operation and still going strong!" />
<meta name="keywords" content="Toccoa-Stephens County Public Library, Northeast Georgia Public Libraries, search catalog, account, events, hours, new books, Toccoa, library, Friends of the Library, Stephens County, opac, steam, 3d printing, makerspace, state park pass" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Literati Ltd" />
<link rel="stylesheet" type="text/css" href="css/tabs.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link href='css/fullcalendar.min.css' rel='stylesheet' />
<link href='css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
</head>
<body>
<!--header-->
<header>
<!--insert a lot of contents organized into tabs-->
<!--End Navigation tabs,begin accordion. tabs.css media queries will cause tabs to display:none at 500px and accordion to display.
Any information added to tabs must be duplicated in the accordion-->
<div class="container">
<!--Home-->
<!--insert a lot of contents organized into accordion tabs-->
<footer>
<div class="widgets">
<div class="new-books">
<iframe id="newbooks" src="https://gapines.org/opac/extras/browse/html-full/item-age/NEG-TOCCOA/1/5"></iframe>
</div>
<div id="tscpl-calendar">
<iframe id="calendar" src="https://teamup.com/ksx6i3x71k3mbbkzbk?view=a&disableSidepanel=1&showLogo=0&showHeader=0&showTitle=0&showViewSelector=0"></iframe>
<div id="bottom-right"><strong>SEE ALL EVENTS</strong> </div>
</div>
</div>
</div>
<div id="social">
<h3>More to See!</h3>
<img class="socialpics" src="images/facebook.png" title="LIKE US ON FACEBOOK!" alt="LIKE US ON FACEBOOK!" />
<img class="socialpics" src="images/niche.png" title="TUTORIALS FOR OUR DIGITAL SERVICES" alt="TUTORIALS FOR OUR DIGITAL SERVICES" />
<img class="socialpics" src="images/tumblebook.png" title="MORE EBOOKS FOR KIDS!" alt="MORE EBOOKS FOR KIDS!" />
<img class="socialpics" src="images/novelist.png" title="FIND A GOOD RECOMMENDATION WITH NOVELIST" alt="FIND A GOOD RECOMMENDATION WITH NOVELIST" />
</div>
</footer>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<p align="right">E-Verify ID#792629</p>
<!--Javascript used-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/tabs.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.min.js"></script>
<script src="js/agenda.js"></script>
<script src="https://my.nicheacademy.com/api/widget/toccoa-stephenslibrary"></script>
</body>
</html>
Here's the primary CSS code that relates to that section:
#social {
width: 375px;
height: 250px;
float: right;
text-align: center;
margin-top: 1%;
margin-right: 1%;
background: rgba(255,255,255,0.5);
overflow: hidden;
}
.socialpics {
display: inline-flex;
margin: 15px 30px 0px 30px;
width: 95px;
height: 95px;
}
#newbooks {
float:left;
background-color: rgba(255,255,255,0.5);
margin: 1%;
height: 250px;
width: 400px;
overflow: auto;
}
#tscpl-calendar {
margin-top: 1%;
margin-left: .5%;
display: inline-flex;
float: left;
width: 415px;
height: 250px;
position: relative;
}
#calendar {
width: 415px;
height: 225px;
float: left;
margin: 1%;
background: rgba(255,255,255,0.5);
overflow: auto;
}
#bottom-right {
right: 0;
bottom: 0;
position: absolute;
}
#tscpl-calendar a:link {
background-color: #379676;
color: white;
}
#tscpl-calendar a:visited {
background-color: #379676;
color: white;
}
#media only screen and (max-width : 800px) {
.gapines {
float: left;
text-align: left;
margin-left: 10px;
}
}
#media only screen and (max-width : 500px) {
.gapines {
width: 100%;
text-align: center;
margin-left: 0;
}
.new-books {
margin-top: 10px;
position: relative;
height: 0;
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
padding-bottom: 125%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#tscpl-calendar {
width: 100%;
margin: 0;
}
#calendar {
width: 100% !important;
margin: 0 !important;
}
#social {
width: 100%;
margin: 0;
}
}
.after-box {
clear: both;
}
#media only screen and (min-width: 800px) and (max-width : 1279px) {
#tscpl-calendar{
float:left;
margin-top: 5px;
overflow: scroll;
display: block;
max-width: 35%;
min-width: 25%;
}
#calendar {
float:left;
margin-top: 5px;
overflow: scroll;
display: block;
max-width: 99%;
min-width: 40%;
background-color: rgba(255,255,255,0.5);
}
.new-books{
float:left;
margin-top: 5px;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 32%;
display: block;
max-width: 50%;
min-width: 35%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#social {
max-width: 45%;
max-width: 25%;
margin-top: 5px;
display: block;
float: left;
}
.socialpics {
display: inline-block;
margin: 0;
margin-top: 2%;
max-width: 100%;
}
}
#media only screen and (min-width: 501px) and (max-width : 799px) {
#tscpl-calendar {
float:left;
margin-top: 5px;
overflow: auto;
display: block;
max-width: 100%;
min-width: 95%;
}
#calendar {
float:left;
margin-top: 5px;
overflow: auto;
display: block;
max-width: 100%;
min-width: 95%;
background-color: rgba(255,255,255,0.5);
}
.new-books{
float:left;
margin-top: 5px;
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 30.50%;
display: block;
max-width: 100%;
min-width: 90%;
max-height:100%;
background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
position: absolute;
top:0;
left: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
#social {
max-width: 100%;
min-width: 90%;
display: block;
float: left;
}
.socialpics {
display: inline-block;
max-width: 100%;
}
}
There is another CSS file, but I don't think it's quite relevant. However, I'm definitely a newbie, so if something's missing, please let me know. Also, there may be something related to JavaScript that I need to include. Let me know if I'm missing that.
I expect my page to display the footer, regardless of the device accessing it. I also need specific instructions for fixing any coding errors, even if you have to point me to a "for Dummies" resource. We have no real programmers here, but we have plenty of books.
On review by a commenter, the other CSS file is important, so here is a scaled down version:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.tabs {
margin-top: .5%;
margin-left: 1%;
margin-right: 10%;
position: relative;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
width: 98%;
opacity: 1;
height: 485px;
margin-bottom: .5%;
}
.tabs nav {
display: flex;
flex-wrap: wrap;
align-items: center;
background: #379676;
color: #ffffff;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
width: 150px;
height: inherit;
}
.tabs nav a {
padding: 15px 0px;
text-align: center;
width: 100%;
cursor: pointer;
}
.tabs .content {
padding: 15px 0px;
position: absolute;
top: 2px;
left: 150px;
color: #2b2626;
background: rgba(255,255,255,0.5);
width: 0px;
height: 100%;
overflow: scroll;
overflow-x: hidden;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.tabs .content.visible {
padding: 20px;
background-color: #ffffff;
width: calc(100% - 150px);
opacity: .87;
}
.tabs .content p { padding-bottom: 1px; }
.tabs .content p:last-of-type { padding-bottom: 0px; }
/* Beginning of Accordion nav */
.container {
width: 100%;
max-width: 500px;
}
.accordion {
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
.accordion input {
position: absolute;
left: 0;
top: 0;
z-index: -999;
}
.accordion label {
display:block;
padding: 15px 20px;
background: #379676;
color: #ffffff;
text-align: center;
text-decoration: none;
font-size: 22px;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.1);
margin-bottom: 3px;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: all .40s;
}
.accordion-content {
text-align: center;
background-color: #ffffff;
opacity: .87;;
margin: 1em 0;
text-decoration: none;
}
.accordion input:checked ~ .accordion-content {
max-height: 600px;
overflow: scroll;
}
#media only screen and (max-width: 500px) {
.tabs {display: none;
height: 0px;}
}
#media only screen and (min-width: 501px) {
.container {display: inline-flex;
height: 0px;}
}
Basically, if you're on a mobile site, the tabs on the side are all collapsed until you touch one of them, but the footer displays at all times.
Update: After looking at the website, I have a solution:
As another user has also pointed out, your is within a , there is a media query which sets this to 'display: none;'. This means anything within this will be hidden on those media specific screen sizes.
A solution is to take the
<footer> ... </footer>.
and place this just before the closing body tag like this...
<footer>
<div class="widgets">
<div class="new-books">
<iframe id="newbooks" src="Welcome%20to%20the%20Toccoa-Stephens%20County%20Public%20Library_files/5.html"></iframe>
</div>
<div id="tscpl-calendar">
<iframe id="calendar" src="Welcome%20to%20the%20Toccoa-Stephens%20County%20Public%20Library_files/ksx6i3x71k3mbbkzbk.html" class="fc fc-unthemed fc-ltr">
<div class="fc-toolbar fc-header-toolbar">
<div class="fc-left">
<h2> </h2>
</div>
<div class="fc-right">
<button type="button" class="fc-today-button fc-button fc-state-default fc-corner-left fc-corner-right">today</button>
<div class="fc-button-group">
<button type="button" class="fc-prev-button fc-button fc-state-default fc-corner-left">
<span class="fc-icon fc-icon-left-single-arrow"></span>
</button>
<button type="button" class="fc-next-button fc-button fc-state-default fc-corner-right">
<span class="fc-icon fc-icon-right-single-arrow"></span>
</button>
</div>
</div>
<div class="fc-center">
</div>
<div class="fc-clear">
</div>
</div>
<div class="fc-view-container">
<div class="fc-view fc-listMonth-view fc-list-view fc-widget-content">
<div class="fc-scroller" style="overflow: hidden auto;">
</div>
</div>
</div>
</iframe>
<div id="bottom-right">
<strong>SEE ALL EVENTS</strong>
</div>
</div>
</div>
</footer>
</body>
</html>
This will take the footer out of the container which is being hidden on desktop.
I want to have an image inside a div (the violet one, see images below), whose dimensions are expressed in %, and that the image never go out from the div but resize when needed, keeping the aspect ratio.
Currently, my code is the following but the image comes out from the div as you can see in the pictures below.
html {
min-height: 100vh;
position: relative;
}
body {
height: 100vh;
overflow: hidden;
}
#grille {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule {
flex-direction: column;
width: 100%;
height: calc(100% / 3);
background-color: aqua;
}
#conteneurImage {
width: 100%;
height: 80%;
background-color: violet;
}
#conteneurImage img {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<div id="grille">
<div id="colonne">
<div id="cellule">
<div id="conteneurImage">
<img src="home.png">
</div>
<div id="conteneurTexte">
Accueil
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
The result:
What I expect:
You can use "display: flex; justify-content: center; " in #conteneurImage. And then Use "width:auto;height:100%;" in #conteneurImage img.You can learn more about flex in https://css-tricks.com/snippets/css/a-guide-to-flexbox/
html {
min-height: 100vh;
position: relative;
}
body {
height: 100vh;
overflow: hidden;
}
#grille {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule {
flex-direction: column;
width: 100%;
height: calc(100% / 3);
background-color: aqua;
}
#conteneurImage {
width: 100%;
height: 80%;
background-color: violet;
display:flex;
justify-content: center;
}
#conteneurImage img {
width: auto;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<div id="grille">
<div id="colonne">
<div id="cellule">
<div id="conteneurImage">
<img src="https://image.flaticon.com/icons/svg/2/2144.svg">
</div>
<div id="conteneurTexte">
Accueil
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
I want 3 section one cover half part of the screen to show image slider and in half part, there is two section right now that part I'm done but now I want to add half part of the screen on top but it does not show image slider section, please help me.
right now my code:
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #ff6a00;
}
.right {
right: 0;
background-color: #ffd800;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="split left">
<div class="centered">
<h2>Blood Donor</h2>
<p>Go To Registration</p>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>Blood Seeker</h2>
<p>Go To Registration</p>
</div>
</div>
</form>
</body>
please help me,
Thank You for your time.
He's a simple layout using CSS Grid (the 2D version of Flexbox):
.main {
display: inline-grid;
height: 200px;
width: 400px;
grid-template-rows: 50% 50%;
border: green solid 2px;
}
.main .level1 {
border: blue solid 2px;
display: flex;
}
.main .level1 .level2 {
border: red solid 2px;
flex-basis: 50%;
}
<div class="main">
<div class="level1"></div>
<div class="level1">
<div class="level2"></div>
<div class="level2"></div>
</div>
</div>
If you are happy using grid then is quite easy. You just need to setup a grid which with two columns and two rows.
Here is a link to a codepen, there are some other styles to make it a little easier to see what is going on but you only need to pay attention to the grid css attributes.
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
height: 50vh;
}
.container>div {
display: flex;
justify-content: center;
align-items: center;
}
.image-slider {
background: magenta;
grid-column: span 2;
}
.page-link-1 {
background: red;
}
.page-link-2 {
background: green
}
<div class="container">
<div class="image-slider">Image Slider</div>
<div class="page-link-1">Page Link 1</div>
<div class="page-link-2">Page Link 2</div>
</div>
https://codepen.io/tmcnicol/pen/PdoLpm/
My implementation with flex:
body,
html {
height: 100%;
}
.wrap {
display: flex;
height: 100%;
flex-direction: column;
}
.slider {
border: 2px solid red;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bottom-wrap {
display: flex;
flex: 1;
}
.link {
border: 2px solid red;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrap">
<div class="slider">Image slider</div>
<div class="bottom-wrap">
<div class="link">Page Link</div>
<div class="link">Page Link</div>
</div>
</div>
Working codepen
I have two divs, one on top, the other on the bottom. I need to have the bottom div fixed, and to resize and occupy the space above when the div on top is collapsed. Links to the scenarios below. Is this possible to accomplish using only CSS? This is for an angularJS application.
UPDATE: Support for older versions of browsers, specifically IE, must also be considered.
Div1 expanded
Div1 collapsed
Yes, you can do this using flex. See snippet below.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("max-height", "50px")
});
});
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.box {
flex-grow: 1;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->
Update
Since you noted in the comments you wanna support older browsers, the same as above can be achieved using the old fasion table layout.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("height", "50px")
});
});
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
color: #fff;
vertical-align: middle;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="box" id="div1">
<strong>div1</strong>
</div>
</div>
<div class="row">
<div class="box" id="div2">
<strong>div1</strong>
</div>
</div>
</div>
You can try this.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
/* height is dynamic, and will expand... */
height: 100%;
/* ...as content is added (won't scroll) */
background: yellow;
}
.footer {
display: table-row;
background: grey;
}
<div class="wrapper">
<div class="content">
<h2>Content</h2>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
you can try this it works fine for me
<div class="wrapper">
<div class="container">
<div class="top-div">
topd div
</div>
<div class="bottom-div">
bottom div
</div>
</div>
</div>
CSS
.wrapper{
float:left;
height:100%;
}
.container {
position:absolute;
display: block;
float: left;
width: 100%;
height: 100%;
min-height:100%;
}
.top-div {
margin: 5px;
float: left;
position: fixed;
top: 0;
width: 90%;
height: 30%;
background-color: red;
}
.bottom-div {
margin: 5px;
position: absolute;
float: left;
bottom: 0;
width: 90%;
background-color: green;
}
use jQuery
$(function() {
var containerH = $(".container").height();
var topdivH = $(".top-div").height();
$(".bottom-div").height(containerH - topdivH);
});
check out jsfiddle