I'm having a problem with height 100%.
The thing is that I have a list of items that should be distributed in the same height as the side image. When I use fixed height, it works normally, but when I use percentage, it doesn't work.
The problem is that the site is responsive and I can't set a fixed height, because the image wont be fixed.
The code is below
<!DOCTYPE html>
<html>
<head>
<title>teste flex box</title>
<style>
html,body {
min-height: 100% !important;
height: 100%;
}
body { margin: 0 }
* { box-sizing: border-box }
.container {
width: 600px;
margin: auto;
}
.row {
clear: both;
margin: 0 -15px;
overflow: auto;
}
.lateral, ul {
width: 50%;
float: left;
padding: 0 15px;
}
img {
width: 100%
}
ul {
list-style: none;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 356px; /* works */
height: 100%; /* not working */
}
ul li {
height: 50px;
background: darkred;
}
</style>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='lateral'><img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=285%C3%97356&w=285&h=356'></div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
</div>
</body>
</html>
Anyone knows what is happening? Thank you.
Try this code below:
<!DOCTYPE html>
<html>
<head>
<title>teste flex box</title>
<style>
html,body {
min-height: 100% !important;
height: 100%;
}
body { margin: 0 }
* { box-sizing: border-box }
.container {
width: 600px;
margin: auto;
position: relative;
}
.row {
clear: both;
margin: 0 -15px;
overflow: auto;
position: relative;
height: auto;
}
.lateral, ul {
width: 50%;
float: left;
padding: 0 15px;
}
img {
width: 100%
}
ul {
list-style: none;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%; /* not working */
position: absolute;
right: 0;
}
ul li {
background: darkred;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
</style>
</head>
<body>
<div class='container clearfix'>
<div class='row'>
<div class='lateral'><img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=285%C3%97356&w=285&h=356'></div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
</div>
</body>
</html>
Related
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 18 days ago.
I am trying to create a navbar / header, but I am having some trouble centering an h1-element.
This is my HTML:
body {
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2%;
}
nav {
display: flex;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 10px;
}
h1 {
margin: 0;
text-align: center;
flex-grow: 1;
}
button {
display: inline-block;
}
<header>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<h1>SalonM</h1>
<button>Button</button>
</header>
To be clear, I do not want to center the h1-element relative to the header, I want to center it in regards to the screen.
Any ideas on how to fix this?
Try this:
body {
margin: 0;
padding: 0;
}
.nav-logo {
position: absolute;
display: flex;
justify-content: center;
width: 100%;
height: 100px;
align-items: center;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2%;
height: 100px;
}
nav {
display: flex;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 10px;
}
h1 {
margin: 0;
text-align: center;
flex-grow: 1;
}
button {
display: inline-block;
}
<header>
<div class="nav-logo">
<h1>SalonM</h1>
</div>
<div class="nav-wrapper">
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<button>Button</button>
</div>
</header>
If you put the H1 tag inside a Div tag, you will be able to center the div's content using "text-aling: center;" (The Div must have a defined width).
I have the following setup:
.layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.appbar {
background-color: blue;
color: white;
}
.sidebar {
flex-grow: 1;
overflow-y: auto;
}
.drawer-container {
height: 100%;
display: flex;
}
.drawer {
position: relative;
background-color: #272b34;
color: lightgray;
border-style: none;
align-self: stretch;
overflow-y: auto;
}
.list {
list-style: none;
padding: 1rem;
}
.drawer-content {
padding: 1rem 1rem 1rem 1rem;
margin-top: 1px;
align-self: stretch;
background-color: #eef5f9;
overflow: auto;
flex: 1 1 auto;
}
.component {
background-color: white;
height: 100%;
box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 10%);
overflow: auto;
border-radius: 4px;
}
.header {
padding: 1rem 1rem 1rem;
background-color: #f8f9fa;
}
.grid-container {
margin: 1rem 1rem;
height: calc(100% - 82px);
background-color: red;
}
.grid {
background-color: yellow;
max-height: 100%;
overflow: auto;
}
.grid-content {
height: 500px;
}
<div id="layout" class="layout">
<div id="appbar" class="appbar">
APPBAR
</div>
<div id="sidebar" class="sidebar">
<div id="drawercontainer" class="drawer-container">
<div id="drawer" class="drawer">
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<div id="drawercontent" class="drawer-content">
<div id="component" class="component">
<div class="header">HEADER</div>
<div class="grid-container">
<div class="grid">
<div class="grid-content">GRID CONTENT</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The question is about this piece of css:
.grid-container {
margin: 1rem 1rem;
height: calc(100% - 82px);
background-color: red;
}
Setting the height like this, I can avoid, that the component element has a scrollbar. It means, the grid-container and the header have a total height of the component. But if I test it with different screen size / pixel ratio, I get a scrollbar (with little scrolling). Note, that the component has to have the property overflow set.
The question is, how can I avoid to set the height this way? How can I avoid the use of pixels or any other units? Basically, I want that the grid-container fills always the remaining area from the component element on any screen sizes / resolutions, without showing any scrollbar, it means not extending it.
Hopefully this snippet does what you want:
Sane default of box-sizing: border-box on every element
Removed stupid margin on the body which caused pagewide scrollbar on 100vh height
Swapped margin on grid-container for padding
Tidied up some shorthands etc. padding: 1rem 1rem 1rem 1rem -> padding: 1rem are the same
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.appbar {
background-color: blue;
color: white;
}
.sidebar {
flex-grow: 1;
overflow-y: auto;
}
.drawer-container {
height: 100%;
display: flex;
}
.drawer {
position: relative;
background-color: #272b34;
color: lightgray;
border-style: none;
align-self: stretch;
overflow-y: auto;
}
.list {
list-style: none;
padding: 1rem;
}
.drawer-content {
padding: 1rem;
margin-top: 1px;
align-self: stretch;
background-color: #eef5f9;
overflow: auto;
flex: 1 1 auto;
}
.component {
height: 100%;
box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 10%);
overflow: auto;
border-radius: 4px;
}
.header {
padding: 1rem;
background-color: #f8f9fa;
}
.grid-container {
padding: 1rem;
height: calc(100% - 82px);
}
.grid {
background-color: yellow;
max-height: 100%;
overflow: auto;
}
.grid-content {
height: 500px;
}
<div id="layout" class="layout">
<div id="appbar" class="appbar">
APPBAR
</div>
<div id="sidebar" class="sidebar">
<div id="drawercontainer" class="drawer-container">
<div id="drawer" class="drawer">
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<div id="drawercontent" class="drawer-content">
<div id="component" class="component">
<div class="header">HEADER</div>
<div class="grid-container">
<div class="grid">
<div class="grid-content">GRID CONTENT</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I try to chamfer the middle of the menu but I can't find how to do it in CSS.
Here is what I would like :
Didn't found a good way to do it.
Tried with some pseudo elements and bottom-left & bottom-right radius.
I could take the logo with the bottom things I guess, but I'm pretty sure it's possible to do it CSS way, but I can't find how.
Here is how I structured it :
* {
box-sizing: border-box;
}
ul,
li {
list-style: none;
line-height: 1;
display: inline-block;
}
.header {
line-height: 1;
padding-top: 15px;
background-color: #FFF;
}
.header>div {
display: grid;
grid-column-gap: 90px;
align-items: center;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "left center right";
}
.header ul.menu>li:not(:first-child) {
margin-left: 35px;
}
.header li {
display: inline-block;
}
.header__left {
grid-area: left;
justify-self: right;
}
.header__center {
grid-area: center;
}
.header__right {
grid-area: right;
}
<header class="header">
<div class="container">
<div class="header__left">
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
<div class="header__center">
Logo
</div>
<div class="header__right">
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</div>
</header>
I'm not sure what went wrong with your attempt at using pseudo-elements, but this seems to work. You might need to fiddle with margins, padding, and position a bit.
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
padding: 0;
background-image: url(https://picsum.photos/1600);
background-size: cover;
background-color: pink;
}
ul,
li {
list-style: none;
line-height: 1;
display: inline-block;
}
.header {
line-height: 1;
padding: 0 0 5px;
margin-top: 15px;
position: relative;
overflow: hidden;
}
.header .container {
background-color: #fff;
position: relative;
padding-top: 10px;
margin-bottom: 20px;
}
.header::before {
content: '';
position: absolute;
width: 120px;
height: 120px;
border-radius: 60px;
left: 50%;
transform: translateX(-50%);
top: -35px;
background: #fff;
overflow: hidden;
}
.header>div {
display: grid;
grid-column-gap: 90px;
align-items: center;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "left center right";
}
.header ul.menu>li:not(:first-child) {
margin-left: 35px;
}
.header li {
display: inline-block;
}
.header__left {
grid-area: left;
justify-self: right;
}
.header__center {
grid-area: center;
}
.header__right {
grid-area: right;
}
<header class="header">
<div class="container">
<div class="header__left">
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
<div class="header__center">
<img src="https://via.placeholder.com/50" />
</div>
<div class="header__right">
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</div>
</header>
Fiddle demo
I was experimenting with flexbox on IE and noticed that my navigation bar does not work the same on IE compared to all other browsers.
The navigation bar should appear on two lines as soon as the buttons on the right don't fit in the space right next to the logo. If it doesn't fit, it's pushed on the second line with flex-wrap: wrap. And when it's pushed to the second line it centers all buttons over the entire width of the screen.
I fixed this by using a high flex-grow number on the spacer between the logo and the navigation bar. This works well on chrome, edge, etc, but not on internet explorer 11.
The demo I use for to test this:
https://jsfiddle.net/td2rq4h1/
*{
box-sizing: border-box;
}
body{
background: red;
}
.logo{
background-color: yellow;
width: 145px;
height: 70px;
margin-right: 100px;
}
#headermenu{
background-color: gray;
.telephone {
border: 3px solid pink;
width: 145px;
height: 30px;
margin-right: 100px;
}
}
#menu{
background-color: blue;
}
.spacer {
flex-grow: 1000;
background-color: green;
display: flex;
flex-wrap: wrap;
}
.inner-spacer {
flex-grow: 1;
flex-basis: 100%;
}
.link {
flex-grow: 0;
}
nav{
border: 5px solid black;
flex: 1 1;
display: flex;
justify-content: center;
}
ul{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
li{
border: 2px solid purple;
background-color: white;
padding: 1em;
white-space: pre;
margin: 0;
display: inline-block;
}
<div id="menu" class="d-flex flex-wrap">
<div class="logo">Logo</div>
<div class="spacer"></div>
<nav>
<ul class="d-flex flex-row">
<li>Home</li>
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
<li>Nav item 4</li>
<li>Nav item 5</li>
</ul>
</nav>
</div>
Can anybody explain me why this happens and how i could resolve this? Thanks
you may reduce the use of flex: x properties and play with margin instead ... hudge flex value..
example forked from the broken jsfiddle:
* {
box-sizing: border-box;
}
.d-flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
body {
background: red;
}
.logo {
background-color: yellow;
width: 145px;
height: 70px;
margin-right: 100px;
}
#headermenu {
background-color: gray;
}
#headermenu .telephone {
border: 3px solid pink;
width: 145px;
height: 30px;
margin-right: 100px;
}
#menu {
background-color: blue;
}
.spacer {
flex-grow: 1;
background-color: green;
display: flex;
}
nav {
border: 5px solid black;
display: flex;
justify-content: center;
margin: 0 auto;
}
nav ul {
list-style: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
nav ul li {
border: 2px solid purple;
background-color: white;
padding: 1em;
white-space: pre;
margin: 0;
display: inline-block;
}
<div id="menu" class="d-flex flex-wrap">
<div class="logo">Logo</div>
<div class="spacer"></div>
<nav>
<ul class="d-flex flex-row">
<li>Home</li>
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
<li>Nav item 4</li>
<li>Nav item 5</li>
</ul>
</nav>
</div>
explanation : IE11 will be soon a decade old and did not update bugs on its flex implementation since. it's been edge since, and even edge will stop being updated.
I have a small dilemma with a page design. It's best described in image form.
The top image represents the page as it is now - blue being my nav container and yellow, the page content.
At present, the nav is a full width (split left and right) while content is limited to 1024px wide and simply centered using margin auto.
However, on wide pages this looks odd. So, what I'd like to do is right align the menu items with the right-hand side of the content (as in the lower image). The issue being that I don't know the width of the left/right margin.
I have no doubt that this can be achieved using javascript but given that its fundamental to the page design, I'd rather try and achieve something using CSS.
At present, I'm not even sure this is achievable using CSS alone - anyone done something like this before?
header {
background: blue;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 24px;
height:64px;
width: 100%;
}
.title {
flex: initial;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
nav {
flex: 0 0 auth;
margin-left:40px;
}
ul {
display:flex;
list-style: none;
}
ul > li > a {
color:Black;
padding:0 16px;
white-space:nowrap;
}
main {
background-color:yellow;
max-width:1024px;
margin:0 auto;
}
<header>
<div class="title">This is a really long title that replaces the logo.</div>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
</nav>
</header>
<main>
<p>
This is some content.
</p>
</main>
You can do some calculation with calc(). The header is 100% width and the content is 1024px so inside the header you need to add a padding right equal to one margin which is : (100% - 1024px)/2
body {
margin:0;
}
header {
background: blue;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 24px;
padding-right: calc((100% - 1024px) / 2);
height: 64px;
}
.title {
flex: initial;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
nav {
flex: 0 0 auth;
margin-left: 40px;
}
ul {
display: flex;
list-style: none;
}
ul>li>a {
color: Black;
padding: 0 16px;
white-space: nowrap;
}
main {
max-width: 1024px;
margin: 0 auto;
background: yellow;
}
<header>
<div class="title">This is a really long title that replaces the logo.</div>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>ul>
</nav>
</header>
<main>
<p>
This is some content.
</p>
</main>
Something like this?
<header>
<div class="title">Mysite.co.uk</div>
<nav id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
</nav>
</header>
header {
width: 100%;
background: blue;
position: relative;
}
header nav {
width: 100%;
max-width: 1024px;
margin 0 auto;
}
header .title {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
}
FIDDLE
You can do something like that:
header {
height: 40px;
display: block;
background: blue;
color: white;
}
nav {
position: absolute;
right: 0;
left: 0;
top: 0;
}
ul {
width: 400px;
margin: auto;
display: flex;
justify-content: flex-end;
padding: 0;
}
section {
background: yellow;
width: 400px;
margin: auto;
}
<header>
Logo
<ul>
<li>item1</li>
<li>item1</li>
</ul>
</header>
<main>
<section>content</section>
</main>