- This topic is empty.
-
AuthorPosts
-
December 15, 2018 at 2:18 am #280212
DodgeBox
ParticipantHi there! I am currently working on a website for a project in school but I have a bit of an issue. There is a big gap in between my content and footer and I can’t find the issue. If anyone of you could help me I would very much appreciate it.
Many thanks!December 15, 2018 at 6:59 am #280213Shikkediel
ParticipantI suspect it comes from using vertical margins, it’s best to avoid them because they can have unexpected results regarding adjacent elements. Which margin is causing it exactly is unclear to me but adding
overflow: hidden
to#main
is a quick solution – and an indication it’s a result of aforementioned margin usage.December 15, 2018 at 10:45 am #280217DodgeBox
ParticipantI added the overflow: hidden to the main element but it didn’t do anything to the space inbetween the main container and the footer.
December 15, 2018 at 12:13 pm #280220Shikkediel
ParticipantOkay, on my screen size it did make a difference but I think that was coincidental. I reckon
min-height: 100%
on#main
is the culprit then.December 15, 2018 at 12:43 pm #280221DodgeBox
ParticipantThis indeed helped with the big space in between but now I got a problem with, if I resize the screen to lets say for mobile, the footer comes up and floats under the content but in the middle of the screen and not at the bottom.
December 15, 2018 at 5:04 pm #280224Shikkediel
ParticipantSo if I understand correctly, you want the footer to be adjacent to
div#main
whenever the page height is beyond 100% of the screen height but stuck to the bottom when their is room to spare – which means there will be a gap in between.I’m not sure I can think of a pure CSS way to do that myself…
December 15, 2018 at 5:11 pm #280225DodgeBox
Participantyes that is indeed what I would like. What other way would I be able to achieve this?
December 15, 2018 at 5:23 pm #280226December 15, 2018 at 5:49 pm #280227DodgeBox
ParticipantFor some reason none of these 5 ways worked. I can’t seem to figure out how since I did exactly what I had to do so I guess something is interfering with it.
December 16, 2018 at 7:00 am #280235Shikkediel
ParticipantThat’s a nice link, you weren’t really sticking with the required layout though…
Edit – by the way, a
div
element has bothwidth: 100%
anddisplay: block
as default values so there’s no need to specify it in any additional CSS rules.Second edit – there seems to still be an unnecessary scrollbar but it’s a step closer at least.
December 16, 2018 at 7:16 am #280236Shikkediel
ParticipantFixed the second edit above with an
overflow: hidden
on#main
. There’s probably a cleaner way though.December 16, 2018 at 7:55 am #280238DodgeBox
ParticipantThank you so much!!! This worked indeed.
December 16, 2018 at 8:24 am #280239Shikkediel
ParticipantGlad to lend a hand. Especially when it revives the memory of some neat CSS I know realise I’d seen before.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.