바닥 글이 주 내용과 겹칩니다.

바닥 글을 수정하기 위해 반복해서 시도하고 솔루션을 온라인으로 검색했지만 아무 것도 효과가 없었습니다. 나는 페이지의 내용을 지우고 바닥에 앉아 있기를 원한다. 단지 작동하지 않을 것이다. 나는 약간의 도움을 정말로 사용할 수있다. 그건 그렇고 비판의 자유를 느끼기 시작한 것입니다. 내가 아니라 당신이 원하는 것을 이해한다면 https://codepen.io/FearShady/pen/YrMvMz가바닥 글이 주 내용과 겹칩니다.

<html> 
<head> 
    <title>Lorem ipsum</title> 
    <link rel="stylesheet" type="text/css" href="Lorem ipsum.css" /> 
</head> 
<body> 
<div id="container"> 
    <div id="title"> 
    <h1>Lorem ipsum</h1> 
    </div> 
    <div id="main"> 

     <div id="text"> 
     <h2>Lorem ipsum</h2> 
     <p><mark><em>Lorem ipsum</em></mark> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

     <h2>Lorem ipsum</h2> 
     <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is </p> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/CBjij5QgzeE" frameborder="0" allowfullscreen></iframe> 
     <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias "</p> 
     <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so </p> 

     <h2>Lorem ipsum</h2> 

     <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, </p> 

     <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, no resultant pleasure?"</p> 

     <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias </p> 
     <h2>Lorem ipsum</h2> 
     <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system"</p> 


     <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias "</p> 


     <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, no resultant pleasure?"</p> 
     <h2>Lorem ipsum</h2> 

     <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias."</p> 
     </div> 
     <div id="image"> 
     <img src="Lorem ipsum.png" alt="Lorem ipsum" width="330" /> 
     </div> 

    </div> 
    <div id="cuprins"> 
    <table border="solid" > 
     <th>Lorem ipsum</th> 
     <th>Lorem ipsum</th> 
     <th>Lorem ipsum</th> 
     <th>Lorem ipsum</th> 
     <th>Lorem ipsum</th> 
     <th>Lorem ipsum</th> 
    </table> 
    </div> 

    <div id="footer"> 
    <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </q> 
    </div> 
</div> 
</body> 
</html>

출처

2017-10-22 Shady

'position : absolute'이 실제로하는 일을 이해하고 있습니까? 그것은 당신의 문제의 유일한 원천입니다 – Jelmergu

몸은 바닥 글의 상대적 위치 (절대)에, 당신이 그것을 변경해야한다 : 당신이

이

는 코드와 codepen됩니다 :) 감사 이렇게 :

html, body{ 
    margin: 0; 
    padding:0; 
    padding-bottom:50px; 
    background-image: url("background.png"); 
    background-attachment: fixed; 
} 
#footer { 
    position: fixed; 
    bottom: 0; 
    right:0; 
    left:0; 
    height: 50px; 
    background-color: rgba(0, 0, 0, 0.6); 
}

출처

2017-10-22 16:51:41 pirs

당신은 최고입니다, 고마워요 :) – Shady

당신은 환영합니다 – pirs

바닥 글이 주 내용과 겹칩니다.

답변

관련 문제