1. 首頁
  2. 問答
  3. 粘性頁腳重疊;所有的css失敗

粘性頁腳重疊;所有的css失敗

2017-01-18 30 views
0

我有一個很好的頁腳，直到我簡化了我的設計，使得blog div與article div擴展，而不是包含內部滾動功能。現在，無論我使用何種形式的CSS，頁腳都不會粘在我的頁面底部。 如果您在blog div或article div中包含大量文本，頁腳將僅覆蓋文章/博客文本，該文本會延伸到頁面的底部。我知道這是一個常見問題，但我已經用完了以前的帖子中討論過的提示，而且他們都沒有效果。另外，我可以補充一點，我通常不會在編碼時遇到這個問題。所以這是一個努力，看看新鮮的眼睛是否能找到問題。下面的代碼是我最近做的這個工作的嘗試。 任何幫助，不勝感激。這可能是一個小錯誤，但我只是沒有看到它。如果你能使它工作，那麼對你很好！提前致謝。粘性頁腳重疊;所有的css失敗

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>

來源

2017-01-18 user5258035

回答

0

試試這個：

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

來源

2017-01-18 23:06:54

+0

我仍然得到這個問題，我害怕。你是否能夠使用填充文本工作？我做了修改，填補了「博客」div相當豐富，仍然存在頁腳問題。 – user5258035

+0

好的，我不確定，爲什麼，但是當我複製/粘貼第二次包含的代碼時，它就起作用了！太感謝了！ – user5258035

0

請與Flexbox的這種溶液（您避免計算（））：

* { 
 
    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>

來源

2017-01-18 23:53:54 Syden

相關問題

 相關問題