What I have so far
This is the flex layout I have. It is based on the idea of holy-grail.
This is what current layout look
What I'm trying to do
I need main to stretch to fill remaining height
This is what I'm trying to make
Most solutions I found on the internet won't work for me.
So far my attempts with %based heights have nothing fruitful.
Setting main height to 100% will make it overflow parent container.
Headers and footer don't have fixed height, hence, calc based solutions also won't work.
External Links:
current_layout: https://i.stack.imgur.com/GooN5.png
trying layout: https://i.stack.imgur.com/3Ovic.png
Code snippet
.ctm .grail {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-between;
gap: var(--ctm-gap, 1em) var(--ctm-gap, 1em);
}
.ctm .grail>details,
.ctm .grail>header,
.ctm .grail>nav,
.ctm .grail>footer {
flex-basis: 100%;
}
.ctm .grail>header {
min-height: 4em;
}
.ctm .grail>main {
flex-grow: 3;
}
.ctm .grail>aside {
flex-grow: 1;
min-width: min(6em, 100%);
}
<!DOCTYPE html>
<html lang="en" class="ctm">
<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>Consortium Test</title>
<link rel="stylesheet" href="../../assets/output/web/styles.css">
<style>
body {
margin: 0;
min-height: 100vh;
background-color: #122334;
}
details {
background-color: #f00;
color: #fff;
}
header {
background-color: #f44;
color: #fff;
}
nav {
background-color: #0f0;
color: #fff;
}
aside {
background-color: #00f;
color: #fff;
}
main {
background-color: #ff0;
color: #000;
}
footer {
background-color: #f0f;
color: #fff;
}
</style>
</head>
<body class="grail">
<details>
<summary>Notification</summary>
<p>Details</p>
</details>
<header>Header</header>
<nav>Navigation</nav>
<aside>Left</aside>
<main>Main</main>
<aside>Right</aside>
<footer>Footer</footer>
</body>
</html>
Structure of HTML needs to be change to get the required output
<!DOCTYPE html>
<html lang="en" class="ctm">
<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>Consortium Test</title>
<style>
body {
margin: 0;
min-height: 100vh;
background-color: #122334;
}
details {
background-color: #f00;
color: #fff;
}
header {
background-color: #f44;
color: #fff;
}
nav {
background-color: #0f0;
color: #fff;
}
aside {
background-color: #00f;
color: #fff;
}
main {
background-color: #ff0;
color: #000;
}
footer {
background-color: #f0f;
color: #fff;
}
.ctm .grail {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-between;
gap: var(--ctm-gap, 1em) var(--ctm-gap, 1em);
}
.ctm .grail > details,
.ctm .grail > header,
.ctm .grail > nav,
.ctm .grail > footer {
width: 100%;
}
.ctm .grail > header {
min-height: 4em;
}
.body main {
flex-grow: 2;
}
/* .ctm .grail */
.body {
display: flex;
flex-direction: row;
flex: 1;
gap: 16px;
/* wid */
}
.body aside {
flex-grow: 1;
min-width: min(6em, 100%);
}
</style>
</head>
<body class="grail">
<details>
<summary>Notification</summary>
<p>Details</p>
</details>
<header>Header</header>
<nav>Navigation</nav>
<div class="body">
<aside>Left</aside>
<main>Main</main>
<aside>Right</aside>
</div>
<footer>Footer</footer>
</body>
</html>
Have you tried vh based heights?
Having set the height of all the elements apart from main would be really helpful, as it allows to use calc().
Other than that, here is my solution for your problem:https://codepen.io/SwampWitch/pen/eYjrmNa?editors=1100
I wrapped main and aside in a div, then used display: flex on it, along with eyeballed value of height: 80vh. Using calc() would be much more elegant solution and a responsive one at that.
Related
I am using flex and have 2 columns. These items both fill all height available.
Inside item 1 I've added 2 div's ... the second one I need it to fill up all space available and scroll Y if items inside it go overflow.
I cannot get .box to go 100% height of it's parent.
Here is the code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="item">
<div class="title">Title here</div>
<div class="box">
Box Here
</div>
</div>
<div class="item"></div>
</div>
</body>
</html>
CSS:
.container {
display: flex;
flex-direction: column;
min-height: 98vh;
}
.item {
flex: 1;
}
.item:nth-child(1) {
background-color: blue;
}
.item:nth-child(2) {
background-color: red;
}
.title {
font-size: 30px;
color: white;
}
.box {
background-color: grey;
height: 100%; /* not working */
align-self: stretch;
overflow-y: scroll;
}
How can I fix this issue?
Use this css:
.container {
min-height: 98vh;
}
.flex {
/* display: flex; */
/* flex-direction: column; */
height: 98vh;
}
.item {
/* flex: 1; */
height: 50%;
display: flex;
flex-direction: column;
}
.item1 {
background-color: blue;
}
.item2 {
background-color: red;
}
.title {
font-size: 30px;
color: white;
background: blue;
}
.box {
height: 100%;
overflow-y: auto;
background-color: grey;
}
No need to use flex and complicate the problem
I changed the HTML layout a little bit. You can use flex.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="title">Title here</div>
<div class="flex">
<div class="item item1">
<div class="box">
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
</div>
</div>
<div class="item item2"></div>
</div>
</div>
</body>
</html>
CSS
.container {
min-height: 98vh;
}
.flex {
display: flex;
flex-direction: column;
height: 98vh;
}
.item {
flex: 1;
display: flex;
flex-direction: column;
}
.item1 {
background-color: blue;
}
.item2 {
background-color: red;
}
.title {
font-size: 30px;
color: white;
background: blue;
}
.box {
background-color: grey;
overflow-y: scroll;
flex: 1;
}
I am working on a simple code editor application and I stumbled upon a visual bug, basically the textarea is a little bit taller than the container.
This is the index.html:
<!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>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
This is the index.css:
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
<!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>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
I have tried everything but cannot find a solution, searched around Stackoverflow but could not find an answer I thought it was caused by the resize, border and outline, but appearently those are not the problem.
Add box-sizing: border-box; to your textarea styles
<!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>Flex Box</title>
<link rel="stylesheet" href="">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
width: 90vw;
height: 90vh;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
</body>
</html>
Hi everybody! I've been learning flex box but I'm having a problem with this particular example. There's a thin white space between the border and the elements, like a thin margin. I don't know why is it there and how to remove it. Can somebody help me, please?
EDIT: I'm not refering to the space-between propery, I want it, but there is a thin margin going from top to bottom, left and right that shouldn't be there
If you want to remove spacing in between, your child box div should be 1/4 of the width of the parent div, like below code
<!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>Flex Box</title>
<link rel="stylesheet" href="">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
width: 90vw;
height: 90vh;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 10px solid black;
}
.box {
width: 25%;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
</body>
</html>
Is this what you want?
*{ /*Don't mind this, this is in place of your body style*/
margin:0;
padding:0;
}
.container {
box-sizing:border-box;
width: 100vw;
height: 100vh;
/* margin: 10px auto; This the one causing it to be surrounded by a white border*/
display: flex;
flex-direction: row;
/*justify-content: space-between; TAKE THIS OUT*/
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
flex-grow:1; /* ADD THIS IN */
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
Bear with me here since I'm still learning how to code fully. I'm trying to write a code that, on desktop, will display a navigational bar on the right side of the screen. When displayed on something smaller than 800px, however, I want it displayed as a column instead of a row. Whenever I try setting this up though, it only displays in a row and won't turn to a column form below 800px.
Any and all help is appreciated!
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
#media(max-width:800px){
body {
background: #135e46;
}
div {
background: #73a788;
flex-direction: column;
display: flex;
font-size: 1em;
align-items: center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
padding: 20px;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
Home
Portfolio
Education
Resume
Contact
</nav>
</div>
</body>
</html>
You need to add display:flex and flex-direction:column to your nav element to display a elements in column.
So if your div have only one child it's normal to see any changes except if you look at the main axis ( https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction )
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
So you can remove all flexbox's properties in div's media query and set navbar location using justify-content ( for the horizontal axis ) or align-items ( for vertical axis ). Make sure you have a large enough container if you want to move your navbar on the vertical axis.
If you have properties defined outside of your media queries you don't need to rewrite them. Media queries are just a sort overwriting system which depend on media. ( screen size usually )
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
#media(max-width:800px){
body {
background: #135e46;
}
div {
justify-content:center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
}
nav{
display:flex;
flex-direction:column;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
Home
Portfolio
Education
Resume
Contact
</nav>
</div>
</body>
</html>
you need to turn a tag to block from default inline
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
#media(max-width:800px){
body {
background: #135e46;
}
div {
background: #73a788;
flex-direction: column;
display: flex;
font-size: 1em;
align-items: center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
padding: 20px;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
display:block /* added this rule */
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
Home
Portfolio
Education
Resume
Contact
</nav>
</div>
</body>
</html>
I'm just building a mini test project in an online HTML/CSS course I'm doing for beginners and I don't understand why my navbar content doesn't respond to screen width. The header border goes right through my content if you keep reducing screen width (I've left borders on so you can see that happening).
I have copied my code and the course instructor's code below so that so you guys can tell me why his works but mine doesn't. The only major difference I see is that I used anchor tags whereas he used button tags for navigation but I still don't get why that is a problem (I set my anchor tags to display:block; in case their inline display was the issue).
My code:
/*mycss.css*/
* {
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
header {
border: 1px solid hotpink;
height: 100vh;
width: 10vw;
display: flex;
flex-direction: column;
justify-content: space-around;
border-right: 1px solid #D7DBDD;
}
div#top-nav {
border: 5px solid green;
height: 25%;
width: 100%;
display: flex;
flex-direction: column;
}
ul {
border: 1px solid gold;
list-style-type: none;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
li {
border: 1px solid red;
width: 100%;
/* text-align: center; */
}
li a {
border: 1px solid blue;
display: block;
padding: 20px 0 20px 20px;
text-decoration: none;
color: #16A2D7;
font-size: font-size: 2vw;
}
li a:hover {
background-color: #EEF3F5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="mycss.css">-->
</head>
<body>
<header>
<div id="top-nav">
<ul>
<li>Inbox</li>
<li>Contact</li>
<li>Accounts</li>
</ul>
</div>
<div>
<ul>
<li>Legal</li>
</ul>
</div>
</header>
</body>
</html>
Instructor's code:
/*main.css*/
html,
body,
div,
nav,
button {
padding: 0;
border: 0;
margin: 0;
box-sizing: border-box;
}
html {
color: #16A2D7;
font-size: 2vw;
}
#sidebar {
height: 100vh;
/* arrange child elements */
display: flex;
flex-direction: column;
justify-content: space-between;
/* format */
border-right: 1px solid #D7DBDD;
width: fit-content;
/*the width*/
}
.sidebar-child {
/* arrange child elements */
display: flex;
flex-direction: column;
}
.sbc-top {
/* format */
padding-top: 2rem;
}
.sbc-btm {
padding-bottom: 2rem;
}
button {
/* format */
color: inherit;
background-color: white;
font-size: 1rem;
height: 3rem;
width: 10rem;
/*the width*/
text-align: left;
padding-left: 2rem;
cursor: pointer;
}
button:hover {
background-color: #EEF3F5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar Menu</title>
<!--<link rel="stylesheet" href="main.css">-->
</head>
<body>
<div id="sidebar">
<nav class="sidebar-child sbc-top">
<button>Inbox</button>
<button>Contact</button>
<button>Accounts</button>
</nav>
<div class="sidebar-child sbc-btm">
<button>Legal</button>
</div>
</div>
</body>
</html>
The chief thing that is causing you issues is this rule:
header {
width: 10vw;
}
This means, no matter what, make my <header> have width equal to 10% of the width of the viewport. This doesn't account for size of the content within. Take a look at your professor's rule for the #sidebar, it uses width: fit-content which doesn't limit the size of the container.
An additional issue is that you are using:
li a {
display: block;
}
Which means the <a> are going to try and eat as much space as they. Normally, they are inline which causes them not to try to fill out width. Depending on what presentation you are trying to make, you should remove the width: 10vw; and the display: block; to start.