Issue
Using flexbox, I styled the links with padding and bottom border line but the border line shows out past the header line, how to get the links and their bottom border line to completely be within the header?
Isn't the container supposed to auto adjust to fit its content?
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1rem;
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-flow: column;
height: 100vh;
background-color: whitesmoke;
}
body>header,
body>footer {
flex: 0 0 auto;
background-color: white;
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
/* padding: 0.25rem; */
}
body>header .link {
color: blue;
border-bottom: 2px solid transparent;
outline: 0;
padding: 0.25rem;
text-decoration: none;
}
body>header .link:hover,
body>header .link:focus {
border-bottom: 2px solid blue;
}
body>header .link.title {
font-size: larger;
font-variant: small-caps;
}
body>main {
flex: 1 1 auto;
overflow: auto;
}<body>
<header>
<a href="#" class="link title">One</a>
<a href="#" class="link">Two</a>
<a href="#" class="link">Three</a>
<a href="#" class="link">Four</a>
<a href="#" class="link">Five</a>
</header>
<main></main>
<footer>Footer</footer>
</body>Solution
After spending a while banging my head I finally found the way... I just had to set the header's display: flex; and just like that it works, no need to specify the header's dimensions nor margin nor padding, I'm a happy camper!
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1rem;
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-flow: column;
height: 100vh;
}
body>header,
body>footer {
flex: 0 0 auto;
display: flex;
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
}
body>header .link {
color: blue;
border-bottom: 2px solid transparent;
outline: 0;
padding: 0.5rem;
text-decoration: none;
}
body>header .link:hover,
body>header .link:focus {
border-bottom: 2px solid blue;
}
body>main {
flex: 1 1 auto;
background-color: whitesmoke;
}<body>
<header>
<a href="#" class="link">One</a>
<a href="#" class="link">Two</a>
<a href="#" class="link">Three</a>
<a href="#" class="link">Four</a>
<a href="#" class="link">Five</a>
</header>
<main></main>
<footer>Footer</footer>
<body>Answered By - JorgeZ
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.