I was trying to build a web page and I started with some css I found online .
When I'm trying to add new div in the body it keeps appearing under the navbar.
I know it's related to position but I couldn't figure out a solution.
wrapper{
background: #171c24;
position: fixed;
width: 100%;
}
.wrapper nav{
position: relative;
display: flex;
max-width: calc(100% - 200px);
margin: 0 auto;
height: 70px;
align-items: center;
justify-content: space-between;
}
nav .content{
display: flex;
align-items: center;
}
https://jsfiddle.net/24d1keht/
Sorry , I couldn't post all the code here. Thank you.
Set the margin-top property of your body to the height of your navigation bar and then set the absolute position of your navigation bar to the very top of the page (so it isn't affected by the new margin), with the top property.
The CSS would look like this:
body {
margin-top: 0;
}
.wrapper {
top: 0;
}
Related
Here is the current state of my project:
And on the left you see a sub menu with the next
:host {
height: 100%;
background-color: $color-blue-100;
width: 14rem;
margin: auto;
display: flex;
flex-direction: column;
position: fixed;
border-left: solid 1px;
//Doesn't matter below
h1 {
font-size: 23px !important;
text-align: center;
padding: 2rem 0;
margin: 0;
color: white;
}
a {
text-decoration: none;
height: 4rem;
font-size: 18px;
color: white;
background: $color-orange-100;
display: flex;
label {
margin: auto 0 auto 2rem;
}
}
And to the right I have 3 components written in angular and before them i'm inserting sub menu
<dash-admin-menu></dash-admin-menu>
<div class="vsk__column">
<dash-create-activity></dash-create-activity>
<dash-create-partner></dash-create-partner>
<dash-create-resort></dash-create-resort>
</div>
.#{css-namespace}column{
display: flex;
flex-direction: column;
width: 100%;
max-height: 100%;
margin-bottom: 1rem;
}
The problem is that i want my sub menu to be fixed but if I do so I'm overlapping my three components.
overlapped picture
How can I avoid this ?
what about setting a left margin on ".vsk_column" with the size equals to the width of the menu ?
You could use a variable in css
I assume you want to prevent the menu to be moved when scrolling on the right side? Maybe better not do set position:fixed on the left menu. Set it to height:100vh; and .vsk__column {overflow: auto;}
As an alternative (quite simple workaround), you can try to set the height of the dash-admin-menu and then offsetting the vsk__column div by the same amount of pixels (e.g. 100px), like in following:
<div class="admin_menu_wrapper>
<dash-admin-menu></dash-admin-menu>
</div>
<div class="vsk__column">
<dash-create-activity></dash-create-activity>
<dash-create-partner></dash-create-partner>
<dash-create-resort></dash-create-resort>
</div>
and then in CSS something like this:
.admin_menu_wrapper {
height: 100px;
}
.vsk__column {
margin-top: 100px;
}
I want to set the height of a child tag to 100% but as soon as I redirect to another page the height remains same disabling the page to scroll.
Image 1.css
body{
background: url("Resources/Cash.jpeg");
}
html,body{
margin: 0;
padding: 0;
}
#root{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.account{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 30px;
backdrop-filter: blur(2px);
}
This style without setting the height makes the first page look half but the second page which is 'Create' looks perfect and scrollable.
Image 1
Image 2.css
body{
background: url("Resources/Cash.jpeg");
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
#root{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.account{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 30px;
height: 100%;
backdrop-filter: blur(2px);
}
But after adding height to html,body,account and root, the home page looks perfect but the 'Create' page has 'Height' of 100% so it fits the page and becomes unable to scroll.
Image 2
React Html Outer body
<div id="root">
<div class="account">
<!-- Content -->
</div>
</div>
Is there a way so the final output Home looks like image 2 and the Create page looks like image 1
Not sure how you are setting the height exactly, but if you are using the same container for both pages, then I can think of two solutions out of the box:
Give the height CSS property to the component that is displaying the content, not the parent container that is wrapping it.
Use className, and change them dynamically. This can be done with the help of React.useState hook. Set the className to be one thing when it is on the first page and change it when you move to the second page. And Match those classNames in your CSS files.
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 1 year ago.
My HTML layout looks like this:
body //display: flex
nav //flex-basis: 85px
main //flex-grow: 1
footer //flex-basis: 50px
On desktop view, the footer is at the bottom: but if the content grows, later on, the footer is no more at the bottom, there is a gap between the bottom of the page and the end of the footer.
on mobile, you can immediately see the gap.
I'm using display: flex and looking for a way to make sure that the footer always stays at the bottom.
her'es the layout css:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
nav {
flex-basis: 85px;
}
.main {
flex-grow: 1;
}
footer {
flex-basis: 50px;
background-color: #10182f;
color: white;
padding: 15px 0;
}
Thanks in advance
here are some images to clarify:
Normal desktop view:
Longer viewport:
Normal mobile:
Try
position: absolute;
bottom: 0;
for the footer. However maybe you have margin that you are missing on somewhere
Better way is to not use flex. All you need to do is use calc.
Example:
https://codepen.io/seanstopnik/pen/1e41196f62be22d881a4fe61e25c82da
body {
margin: 0;
}
header {
height: 80px;
background: red;
}
main {
min-height: calc(100vh - (80px + 50px));
}
footer {
height: 50px;
background: blue;
}
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
I have a page-wide wrapping div that has flexbox alignment to center:
.app_container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
}
In this wrapper, I have a menu that can vary in height as the user expands submenus. The problem is when the menu becomes vertically bigger than the window height. Some parts of the menu gets cut off at the top.
Image: https://imgur.com/a/x00tnoJ
One solution that I found was to simply get overflow: auto on the menu. But that causes the scroll bar to appear on the menu, not on the page wrapper. I want the scroll bar to be on the page wrapper.
Image: https://imgur.com/a/0eZM5Iq
Don't think it is relevant, but I use React.
Here is codepen: https://codepen.io/GuacomoleCyclone/pen/xxEoary
EDIT: I've stumbled upon a solution. I've added this and it solved all problems:
html, body{
display: grid;
}
If I understand correctly what your codepen is showing, the issue seems to be coming from setting the width and height on the html element. You want to change:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
to
html, body {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100%;
}
I am pretty new to HTML/CSS and have begun trying to learn CSS flexbox layout. Just working on a simple site recreation from scratch using flexbox.
In full screen, the image positioning on the logo looks good. However, when shifting around the screen size, my nav bar on the right side responds but the logo image on the left does not. I believe I have set it up correctly though.
.header-container {
display: flex;
width: 100%;
height: 150px;
align-items: center;
justify-content: space-between;
}
.header-container .logo .sb{
display: flex;
justify-content: flex-start;
width: 60%;
position: relative;
left: 50px;
padding: 20px;
}
Here's a link to my work as well: https://codepen.io/gkunthara/pen/VWdrYj
What exactly am I doing wrong? Any tips on the type of positioning I'm doing with flexbox or with flexbox, in general, are appreciated!
Remove Position
.header-container .nav-bar-container {
display: flex;
/*position: absolute;*/
/*right: 100px;*/
}
Remove position on nav & set max-width: 100% on logo image.
https://codepen.io/thesumit67/pen/bRKYLx?editors=1100