I try to make a responsive website which looks similar in Chrome, IE(11), and FF.
My problem in IE is, that if the site is too long the scrollbar doesn't scroll to the end because of the sticky page-footer('page-footer'). I tried to give my page-main-area a margin or padding bottom but that doesn't change anything.
Another thing is that my sidebar background doesn't fill to the end.
CSS extract:
.page-sidebar {
padding: 10px;
border-top: 2px solid #000;
background-color: #00BB9C;
width: 100%;
padding-bottom: 58px;
}
.page-sidebar h3 {
color: black;
}
.page-sidebar h3:first-child {
margin-top: 0;
}
.page {
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.page-main-area {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 8px;
background-color: #000;
color: #fff;
max-height: 50px;
}
HTML + CSS:
http://jsfiddle.net/mvz8rq1o/2/
What can i do to fix this in IE?
margin-bottom: on page-sidebar should get the full sidebar showing. (won't fix the fill-to-bottom however...)
Related
Hey! Thanks for reading! I've got a web-app login screen. I'm focusing on creating a responsive app-like login page. (no scroll etc)
Issue description:
With a viewport-width of 300px, at 463px and shorter viewport heights, all items fill the entirety of the screen, and the content at the bottom of the page begin to get cut off.
The same can be said with 528px and 650px height.
(so this tells me it's scaling to a particular aspect ratio (phone portrait to relatively squarish aspect ratios. At landscape aspect-ratios, the images become ridiculously big - ...expected but undesired))
Goal: Instead, I would simply like the images to shrink in height and maintain their aspect ratio when the viewport height is changed. (to support the aspect ratio provided by the flex-grow/shrink) as opposed to overflowing and changing that ratio.
note: For those who'd like a simpler example: I think the example is relatively simple. Could it be simpler?, yeah most likely. I'm, not entirely sure what I'd make simpler though.
Codepen: https://codepen.io/gold240sx/pen/eYVdGag (I might suggest to turn devtools on to get a thin width since the design right now is really meant for portrait phones.)
It's quite a bit easier just to copy and paste into whatever editor you prefer.
ORIGINAL:
<!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.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
height:100%;
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
overflow-x: hidden;
overflow-y: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100%;
}
.images{
background-color: aqua;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 100%;
flex-grow: 3;
flex-shrink: 3;
}
span img {
max-width: 100%;
max-height: 100%;
}
.mainImage {
background-color: rgb(128, 248, 0);
display: flex;
max-width: 70%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
max-width: 90%;
position: relative;
width: auto;
margin-left: auto;
margin-right: auto;
}
.allButtons {
background-color: rgb(255, 132, 0);
display: flex;
flex-direction: column;
border: 2px red solid;
flex-grow: 2;
flex-shrink: 2;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
background-color: rgb(249, 149, 0);
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 20px;
display: block;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="images" style="background-color: aqua; width: 100%; flex-grow: 3; flex-basis: 1;">
<span class="mainImage">
<img src="https://i.ibb.co/5YMMtJT/circle-logo-color.png" alt="circle-logo-color">
</span>
<span class="secondaryImage">
<img src="https://i.ibb.co/H4qPCc9/logo-color.png" alt="logo-color">
</span>
</div>
<div class="allButtons">
<div class="mainButtons">
<button>SIGNUP!</button>
<button>LOGIN!</button>
</div>
<div class="bottomButtonContainer">
<button class="bottomButton" style="white-space: nowrap;">LEARN MORE</button>
</div>
</div>
</div>
UPDATED CSS (loosely based upon the initial answer provided by Chizaram) - image scale achieved - image aspect ratio not guaranteed yet -:
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height:100%;
width: 100%;
overflow: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
.images{
background-color: aqua;
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mainImage img,
.secondaryImage img {
max-height: 100%;
max-width: 100%;
}
.mainImage {
background-color: rgb(128, 248, 0);
max-height: 60vw;
margin: 0 auto;
display: flex;
justify-content: center;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
min-height: 30%;
max-width: 90vw;
max-height: 40%;
margin: 0 auto;
display: flex;
justify-content: center;
}
.allButtons {
display: flex;
flex-direction: column;
border: 2px red solid;
height: 30vh;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
/* background-color: rgb(249, 149, 0); */
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 10px;
display: block;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
UPDATE:
Do not forget to remove the old inline styles you declared in the .images div, so they don't revert to previous styling:
<div class="images">...</div> <!-- Remove old inline styles -->
ANSWER:
To achieve this, here are the changes you need to make to your code:
(Please note that I use ellipsis ... to indicate segments of the original code which I did not change, and also for brevity.)
Remove flex properties from the body selector as they are not necessary here. The .container div houses everything on the page. I also cleaned the body rule-set a little by moving the padding and margin properties to the universal selector rule-set as well as using the briefer overflow declaration.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
}
Leave flex properties in the container selector instead and change its height to 100vh to take up full viewport of the screen.
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
Give the .images div a height of 70vh and set the vertical and horizontal alignments to center. I also removed the flex-grow and flex-shrink properties because they were not necessary in order to achieve the desired result.
.images {
...
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center; /* Vertical alignment in column flex-direction */
align-items: center; /* Horizontal alignment in column flex-direction */
}
Set max widths and heights for center images and their parent divs (totaling 100%). Flex and positioning properties aren't necessary here as well since they are affected by their parent div (.images).
.mainImage {
...
max-width: 60%;
max-height: 60%;
margin: 0 auto;
}
.secondaryImage {
...
max-width: 60%;
max-height: 40%;
margin: 0 auto;
}
Set object-fit type to contain for images. I've also changed the elements from spans to divs to structure the html better. The styles here were previously within the span img rule-set. Copy its styles in this new rule-set and delete it.
.mainImage img,
.secondaryImage img {
...
object-fit: contain;
}
Set the height of the .allButtons div to 30vh to take up the remaining height of the viewport.
.allButtons {
...
height: 30vh;
...
}
Reduce padding for buttons on smaller screen sizes to solve the height problem. I added in a media query to adjust to original button size on larger screens. Feel free to adjust the breakpoint height to any value you desire.
button {
...
padding: 10px;
...
}
#media screen and (min-height: 620px) {
button {
padding: 20px;
}
}
The HTML
<div class="mainImage">
...
</div>
<div class="secondaryImage">
...
</div>
I think I have It!! Both Portrait and Landscape. Granted, because of the use of vh / vw, It may have issues with mobile-browser header bars. :/ Maybe there's some Hacky way to fix. but yeah this is looking good so far. I'd have to test on mobile to see further. Galaxy fold it seems to cut off just a bit off the bottom (just a few px.) In addition, Id take all this CSS and wrap it into a media screen itself, then transitioning into a scrollable webpage... or maybe not. Anyways here's the code... Thank you Chizaram for all you're help! I'm gonna buy you a gift card on payday if you like!
ANSWER:
<!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.0">
<title>webApp</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height:100%;
width: 100%;
overflow: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
.images{
background-color: aqua;
flex-grow: 1;
flex-shrink: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.mainImage img,
.secondaryImage img {
object-fit: contain;
display: flex;
justify-self: center;
}
.mainImage img {
max-height: 25vh;
}
.secondaryImage img {
max-height: 20vh;
width: 100%;
max-width: 90vw;
}
.mainImage {
background-color: rgb(128, 248, 0);
max-height: 60vw;
margin: 0 auto;
display: flex;
justify-content: center;
object-fit: contain;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
min-height: 30%;
width: 90vw;
max-height: 40%;
margin: 0 auto;
display: grid;
align-content: center;
object-fit: contain;
}
.allButtons {
display: flex;
flex-direction: column;
border: 2px red solid;
height: 30vh;
flex-grow: 2;
flex-shrink: 1;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
/* background-color: rgb(249, 149, 0); */
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 2em;
display: block;
min-width: fit-content;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
#media only screen
and (max-device-width: 1023px)
/* and (min-device-pixel-ratio : 2.0) */
and (orientation: landscape) {
button {
padding: 1em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="images">
<span class="mainImage">
<img src="https://i.ibb.co/5YMMtJT/circle-logo-color.png" alt="circle-logo-color">
</span>
<span class="secondaryImage">
<img src="https://i.ibb.co/H4qPCc9/logo-color.png" alt="logo-color">
</span>
</div>
<div class="allButtons">
<div class="mainButtons">
<button>SIGNUP!</button>
<button>LOGIN!</button>
</div>
<div class="bottomButtonContainer">
<button class="bottomButton" style="white-space: nowrap;">LEARN MORE</button>
</div>
</div>
</div>
</body>
</html>
I have tow divs in a flex container, one containing the chart and another containing it's legends as below :
When I scroll on the div below, it should scroll up on the chart like so :
Here's my attempt at this with z-index and position absolute :
HTML -
<div className={`${style['chart__doughnut-wrapper-opportunity']} ${props.class}`}>
<div className={style.chart__data}>
<div className={style.chart__doughnut}>
<Chart
className="chart"
data={tabChartData}
width={props.width}
height={props.height}
options={optionsForGraphic(
props.type,
props.orientation,
tabChartData,
)}
/>
</div>
</div>
<div className={style.chart__legend}>
<div className={style.chart__table}>
<ChartLegend
chartType={'doughnut'}
page={props.page}
legendData={tabChartData}
percentage={percentage}
legendColor={legendColor}
legendStyle={legendStyle}
/>
</div>
</div>
</div>
CSS :
.chart__doughnut-wrapper-opportunity {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
max-height: 13.5rem;
margin: 1.25rem 0rem;
width: 100%;
border-bottom: #dadbdf solid 0.063rem;
.chart__data {
display: flex;
height: 100%;
align-items: center;
min-height: 13.5rem;
padding: 0 1rem 0 0;
width: 45%;
position: relative;
.chart__doughnut {
padding: 0;
width: 100%;
canvas {
z-index: 1;
position: relative;
}
}
}
.chart__legend {
display: flex;
// width: 100%;
position: absolute;
height: 20rem;
padding: 0 0 0 1rem;
z-index:10;
.chart__table {
display: flex;
flex-direction: column;
height: 20rem;
width: 100%;
word-wrap: break-word;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
}
Which has resulted in something like this :
I am stuck, not getting any ideas, please help.
Try applying the overflow to the chart_legend class and let's see
So I have this middle container (div) which consists of 2 smaller div.
Here's the code for the div that wraps both div:
.midContainer{
width: 100%;
height: 30vh;
max-height: 700px;
display: flex;
flex-wrap: wrap;
overflow: auto;
justify-content: space-between;
margin-bottom: 15px;
}
Here's the code for left div:
.tokenInfoBox{
width: 60%;
height: 100%;
max-height: 700px;
// padding: 20px 30px ;
background-color: #1b1b1c;
border-radius: 10px 0 0 10px;
}
Here's the code for right div:
.ticketBox{
width: 40%;
height : 100%;
background-color: #0e0304;
box-sizing: border-box;
border-radius: 0 10px 10px 0;
display: flex;
flex-direction: column;
}
Have this added as well:
#media only screen and (max-width: 1060px) {
.tokenInfoBox, .ticketBox {
width: 100%;
}
}
So the content for the left div and right div (both div) display normally in big screen but overflow and overlap div below them in small screen. How do I wrap all the overflow content inside the div?
Here's the image in bigger screen and here's the image in smaller screen where I have to scroll to see all content.
CSS:
.midContainer {
width: 100%;
height: 30vh;
display: flex;
flex-wrap: wrap;
}
.tokenInfoBox {
flex: 1 1 25rem;
height: 100%;
background-color: #1b1b1c;
border-radius: 10px 0 0 10px;
}
.ticketBox {
flex: 1 1 8rem;
height: 100%;
background-color: #0e0304;
border-radius: 0 10px 10px 0;
}
you can use flex in this case when applying flex-wrap.
If i understood well, the problem is because you have set the height of the .midContainer, try something like this:
.midContainer {
display: flex;
width: 100%;
align-self: flex-start;
}
.tokenInfoBox {
width: 60%;
flex-grow: 1;
display: flex;
flex-direction: column;
background: #1b1b1c;
}
.ticketBox {
flex-grow: 1;
display: flex;
flex-direction: column;
background: #0e0304;
width: 40%;
}
this will grow you div to fit the amount of height needed.
Also think about the use of media queries, small devices would be difficult to read 2 divs side by side, maybe should be better one over another
#media (max-width: 768px) {
.midContainer {
flex-direction: column;
}
.tokenInfoBox {
width: 100%;
}
.ticketBox {
width: 100%;
}
}
also I strongly recommend to use tailwind
I need to make y-axis scrollable block inside left-navbar. And height of this block must fill all free space of the left-navbar. This way, that left-navbar height is 100% of the page and no more.
But history-overflow is not scrollable, and all history-item elements are shown, so they made all left-navbar height bigger than the page height.
Also, when page height shrinks, history-overflow should fill only free space to make left-navbar height not more than 100%. How to make this?
Codepen sandbox example:
https://codepen.io/car1ot/pen/zYqLqKB
HTML code:
<div className="left-navbar">
<div className="history">
<label>History</label>
<div className="history-overflow">
<div className="history-item">*...some content here...*</div>
*...more history-item(s) here...*
</div>
</div>
</div>
CSS (scss) code:
div.left-navbar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 290px;
height: 100%;
padding: 25px 20px;
box-sizing: border-box;
div.history {
display: flex;
flex-direction: column;
div.history-overflow {
margin-top: 8px;
margin-right: -20px;
padding-right: 14px;
overflow-y: scroll;
div.history-item {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 16px 0 6px;
height: 40px;
width: 100%;
border-radius: 7px;
margin-bottom: 8px;
box-sizing: border-box;
}
}
}
}
If you set overflow: hidden to .history and max-height: 100vh to .left-navbar, I think it does what you want. Not sure in the context of your complete layout though (maybe you don't want to use 100vh but a different value there). The important part is that you have to limit the height somewhere.
If I correctly understan you, this is your solution:
body { padding:0; margin:0; }
div.left-navbar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 290px;
height: 100vh; /* This */
padding: 25px 20px;
box-sizing: border-box;
background: rgba(#000, 0.1);
div.history {
display: flex;
flex-direction: column;
height:100%; /* This */
div.history-overflow {
margin-top: 8px;
margin-right: -20px;
padding-right: 14px;
background: rgba(blue, 0.1);
overflow-y:scroll;
div.history-item {
display: flex;
align-items: center;
padding: 0 16px 0 6px;
height: 100px;
width: 100%;
border-radius: 7px;
margin-bottom: 8px;
box-sizing: border-box;
background: rgba(#000, 0.075);
}
}
}
}
I'm trying to achieve a responsive Layout with:
- A fixed header width width 100% and an height of e.g. 50px
- 3 equal squares on the right, taking over the whole space from the top to the bottom of the page.
- A main content are taking over the remaining space on the page
Currently my code looks like this (jsfiddle) but I can't get the width of the boxes on the right to be set automatically based on the current height in order to be displayed as squares... Does anybody know a solution for this in pure CSS?
HTML:
<div id="mainView">
<div id="content">
</div><!-- content -->
<div id="squaressWrapper">
<div id="square1"></div><!-- dummy -->
<div id="square2"></div><!-- dummy -->
<div id="square3"></div><!-- dummy -->
<div id="square4"></div><!-- dummy -->
</div><!-- squaressWrapper -->
</div><!-- mainView -->
</div><!-- wrapper -->
CSS:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
-webkit-align-content: stretch;
align-content: stretch;
}
#header {
height: 50px;
width: 100%;
background: #ffb8c4;
}
#mainView {
flex: 1;
-webkit-flex: 1;
position: relative;
background: #666;
}
#squaressWrapper {
position: absolute;
height: 100%;
background: green;
right: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
-webkit-align-content: stretch;
align-content: stretch;
}
#square1 {
position: relative;
flex: 1;
-webkit-flex: 1;
width: 100px;
border: 2px solid white;
background: green;
}
#square2 {
position: relative;
flex: 1;
-webkit-flex: 1;
width: 100px;
border: 2px solid white;
background: green;
}
#square3 {
position: relative;
flex: 1;
-webkit-flex: 1;
width: 100px;
border: 2px solid white;
background: green;
}
I get a solution, using vh units as suggested by Nicho.
The CSS
#squaressWrapper {
position: absolute;
height: 100%;
width: 33vh;
right: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
-webkit-align-content: stretch;
align-content: stretch;
}
.squares {
position: relative;
flex: 1;
-webkit-flex: 1;
width: calc(100% - 15px);
border: 2px solid white;
background: green;
right: -11px;
}
demo
The dimensions are a little bit strange because setting the width of the container to calc(33vh - 15px) didn't work.
May be in a near future that will be easier.
I don't know what is the browser support for this, I tested it only in Chrome.
Note : 15px is the dimension of the header (45px) divided by the number of squares.
Well I took a shot at this...
I changed your sizes up on your css
here is the link to the fiddle.
http://jsfiddle.net/D7RSP/2/
#header {
height: 20%;
width: 100%;
background: #ffb8c4;
}
#mainView {
flex: 1;
width: 69%;
height: 100%;
float: left;
background: green;
}
.square {
flex: 1;
-webkit-flex: 1;
width: 30%;
border: 1px solid white;
background: green;
height: 25%;
float:right;
}