1. Zuhause
  2. Frage und Antwort
  3. Sticky Footer überlappend; Alle CSS schlägt fehl

Sticky Footer überlappend; Alle CSS schlägt fehl

2017-01-18 3 views
0

Ich hatte eine große Fußzeile, bis ich mein Design vereinfacht, indem blog Div mit der article div zu erweitern, anstatt eine innere Scroll-Funktion enthalten. Nun, egal welche Form von CSS ich benutze, wird die Fußzeile nicht an der Unterseite meiner Seite bleiben. Wenn Sie sehr viel Text enthalten, entweder in der blog div oder der article div, überlappen die Fußzeile einfach den Artikel/Blog-Text, der bis zum Ende der Seite erstreckt. Ich weiß, dass dies ein häufiges Problem ist, aber ich habe die Tipps, die in früheren Beiträgen besprochen wurden, bereits erschöpft, und keiner von ihnen schien zu funktionieren. Außerdem könnte ich hinzufügen, dass ich dieses Problem normalerweise nicht mit meiner Codierung habe. Das ist ein Versuch, zu sehen, ob frische Augen das Problem finden können. Die Codierung unten, ist mein letzter Versuch, dies zu tun. Jede Hilfe wird sehr geschätzt. Es mag ein kleiner Fehler sein, aber ich sehe es einfach nicht. Wenn du es zur Arbeit bekommst, dann schaff dich gut! Danke im Voraus.Sticky Footer überlappend; Alle CSS schlägt fehl

body { 
 
    overflow-y: scroll; 
 
    border: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#container { 
 
    border: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: none; 
 
    position: absolute; 
 
    float: left; 
 
} 
 
img { 
 
    position: static; 
 
    float: left; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: auto; 
 
} 
 
#leftcontainer { 
 
    position: fixed; 
 
    float: left; 
 
    height: 100vh; 
 
    width: 20vh; 
 
    padding: 0; 
 
    background: none; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    border: none; 
 
} 
 
#rightcontainer { 
 
    position: absolute; 
 
    float: left; 
 
    height: 100%; 
 
    width: calc(100% - 20vh); 
 
    margin: 0; 
 
    margin-left: 20vh; 
 
    padding: 0; 
 
    padding-bottom: -10%; 
 
    background: pink; 
 
} 
 
#article { 
 
    positon: absolute; 
 
    float: left; 
 
    width: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: blue; 
 
} 
 
#blog { 
 
    position: absolute; 
 
    float: left; 
 
    width: 50% margin: 0; 
 
    padding: 0; 
 
    background-color: red; 
 
    margin-left: 50%; 
 
} 
 
#footer { 
 
    position: relative; 
 
    height: 10%; 
 
    background-color: gray; 
 
    width: calc(100% - 20vh); 
 
    margin-top: 100%; 
 
    margin-bottom: 0; 
 
    margin-left: 20vh; 
 
    padding: 0; 
 
}
<body> 
 
    <div id="container"> 
 
    <div id="leftcontainer"> 
 
    </div> 
 
    <div id="rightcontainer"> 
 
     <div id="article"></div> 
 
     <div id="blog"></div> 
 
    </div> 
 
    <div id="footer"></div> 
 
    </div> 
 
</body>

Quelle

2017-01-18 user5258035

Antwort

0

Versuchen Sie folgendes:

https://jsfiddle.net/jsdu9h0f/3/body{ 
 
overflow-y: scroll; 
 
border: none; 
 
padding: 0; 
 
margin: 0; 
 
height: 100%; 
 
width: 100%; 
 
} 
 

 
#container{ 
 
border: none; 
 
padding: 0; 
 
margin: 0; 
 
height: 100%; 
 
width: 100%; 
 
background: none; 
 
position: relative; 
 
float: left; 
 
} 
 

 
img { 
 
position: static; 
 
float: left; 
 
height: 100%; 
 
margin: 0; 
 
padding: 0; 
 
width: auto; 
 
} 
 

 
#leftcontainer { 
 
position: fixed; 
 
float:left; 
 
height: 100vh; 
 
width: 20vh; 
 
padding: 0; 
 
background: none; 
 
margin: 0; 
 
overflow: hidden; 
 
border: none; 
 
} 
 

 
#rightcontainer { 
 
    float: left; 
 
    width: calc(100% - 20vh); 
 
    margin: 0; 
 
    margin-left: 20vh; 
 
    background: pink; 
 
    padding-bottom: 22%; 
 
} 
 

 
#article{ 
 
position: relative; 
 
float: left; 
 
width: 50%; 
 
margin: 0; 
 
padding: 0; 
 
background-color: blue; 
 
} 
 

 
#blog{ 
 
position: relative; 
 
float: left; 
 
width: 50%; 
 
margin: 0; 
 
padding: 0; 
 
background-color: red; 
 
} 
 

 
#footer { 
 
    height: 10%; 
 
    background-color: gray; 
 
    width: calc(100% - 20vh); 
 
    margin-bottom: 0; 
 
    margin-left: 20vh; 
 
    padding: 0; 
 
    position: absolute; 
 
    bottom: 0; 
 
}
<body> 
 
    <div id="container"> 
 
    <div id="leftcontainer"> 
 
    </div> 
 
    <div id="rightcontainer"> 
 
     <div id="article">I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If 
 
     you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips 
 
     discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt 
 
     to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend 
 
     with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div, 
 
     the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add, 
 
     that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but 
 
     I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no 
 
     matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom 
 
     of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort 
 
     to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I 
 
     had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If 
 
     you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips 
 
     discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt 
 
     to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.</div> 
 
     <div id="blog">I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If 
 
     you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips 
 
     discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt 
 
     to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend 
 
     with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div, 
 
     the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add, 
 
     that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but 
 
     I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no 
 
     matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom 
 
     of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort 
 
     to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.</div> 
 
    </div> 
 
    <div id="footer"></div> 
 
    </div> 
 
</body>

JSfiddle

JSfiddle

Quelle

2017-01-18 23:06:54

+0

ich immer noch das Problem bekommen, ich habe Angst. Konnten Sie es mit Füllertext zum Laufen bringen? Ich machte die Änderungen und füllte den "Blog" div ziemlich voll, und bekam immer noch das Fußzeilenproblem. – user5258035

+0

Okay, ich bin mir nicht sicher, warum, aber als ich das Coding, das du das zweite Mal eingefügt hast, kopiert habe, funktionierte es! Tausend Dank! – user5258035

0

prüfen diese Lösung mit Flexbox aktualisiert (Sie calc() vermeiden):

* { 
 
    box-sizing: boder-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
html, 
 
body { 
 
    overflow-y: scroll; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#container { 
 
    background: none; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
} 
 
#leftcontainer { 
 
    width: 20vh; 
 
    background: none; 
 
    overflow: hidden; 
 
} 
 
#rightcontainer { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    background: pink; 
 
    border: 1px solid green; 
 
} 
 
#article { 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 
#blog { 
 
    width: 50%; 
 
    background-color: red; 
 
} 
 
#footer { 
 
    height: 10%; 
 
    background-color: gray; 
 
    align-self: flex-end; 
 
    margin-left: 20vh; 
 
}
<body> 
 
    <div id="container"> 
 
    <div id="leftcontainer">left container 
 
    </div> 
 
    <div id="rightcontainer"> 
 
     <div id="article"><strong>Long stuff to test footer</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nemo, rerum neque. Rem blanditiis error, quo iste similique exercitationem pariatur quam, illum debitis ex distinctio, facere ratione 
 
     alias aliquid minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi nostrum facere esse atque illum eaque magni dolores deserunt aut reprehenderit excepturi a saepe dolor, consequuntur delectus doloremque unde explicabo quod!Lorem 
 
     ipsum dolor sit amet, consectetur adipisicing elit. Libero quibusdam accusantium architecto quis suscipit impedit quae quasi magnam sunt totam non voluptates, cum tempora ut aut eligendi molestiae ab aperiam. Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Cum quibusdam quaerat, iusto natus nulla sequi nisi eveniet dolore, nobis veniam odio impedit maiores nihil vel. Debitis porro eius id similique.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quaerat hic 
 
     nemo, deleniti nulla officiis molestias, maiores rerum. Enim mollitia dolor facere ad modi ea voluptatem quia sapiente perferendis labore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque beatae excepturi, quis asperiores necessitatibus 
 
     iure explicabo veniam commodi assumenda? Laboriosam magni veniam quod reprehenderit neque magnam explicabo quia, quis, nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident blanditiis harum rerum magni fugiat sequi placeat 
 
     saepe maiores vel quisquam, nisi non beatae consequuntur, perferendis laboriosam odit ipsa reiciendis culpa?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet officiis voluptate labore ducimus. Sapiente adipisci ipsa, ratione aliquid 
 
     tenetur consequuntur nulla dignissimos excepturi nihil molestiae placeat libero? Soluta, beatae sint.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptates et vero mollitia eius, quia ipsa, quas accusantium laboriosam facilis 
 
     iure voluptatum a deserunt earum assumenda fugiat dignissimos consequuntur nulla.</div> 
 
     <div id="blog">blog</div> 
 
    </div> 
 
    </div> 
 
    <div id="footer">Footer</div> 
 
</body>

Quelle

2017-01-18 23:53:54 Syden

Verwandte Themen

 Verwandte Themen