de position chevauche en bas de page

enter image description here de position chevauche en bas de page

<header class="entry-header"> 
 

 
\t \t <div class="right-side"> 
 
     
 
     <h1 class="entry-title">Desk</h1><p>$99</p><p>500x200x600</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie velit erat, nec porta diam fringilla vel. Nunc id euismod purus. Sed enim tellus, auctor a tempor eget, mattis sit amet massa. Etiam imperdiet elit eu faucibus vestibulum. Fusce ultrices ex quis turpis vulputate vehicula. Nulla laoreet vulputate nunc ac pretium. Pellentesque ac velit nec quam rhoncus sagittis eget porttitor lectus. Curabitur egestas vehicula lacinia. Proin ullamcorper, orci id dapibus viverra, libero ex imperdiet ex, quis lacinia dui dui vel est. Quisque condimentum nulla non elit rutrum, non mollis enim volutpat. Vestibulum mattis at magna sed porta. Cras venenatis ex dignissim nisl facilisis maximus. Integer efficitur vel augue vitae consequat. Sed ac fermentum lacus. Nulla facilisi.</p> 
 
    
 
\t \t 
 
\t \t \t <div class="before"> 
 

 
     <p>Before:</p> 
 

 
     <img class="beforeimage" src="img.jpg" alt="" /> 
 

 
\t \t \t </div><!-- end before --> 
 

 
\t \t </div><!--end right-side--> 
 
\t \t 
 
\t \t <!--repeater field--> 
 
\t \t <div class="left-side"> 
 
\t \t 
 
\t \t \t <ul class="slides"> 
 

 
\t \t \t 
 
\t \t \t \t <li class="slide"> 
 

 
\t \t \t \t \t \t <img src="img1.jpg" alt="Featured Desk"> 
 

 
\t \t \t \t </li> 
 

 
\t \t \t 
 
\t \t \t \t <li class="slide"> 
 

 
\t \t \t \t \t \t <img src="img2.jpg" alt="Featured Desk"> 
 

 
\t \t \t \t </li> 
 

 
\t \t \t 
 
\t \t \t \t <li class="slide"> 
 

 
\t \t \t \t \t \t <img src="img3.jpg" alt=""> 
 

 
\t \t \t \t </li> 
 

 
\t \t \t 
 
\t \t \t \t <li class="slide"> 
 

 
\t \t \t \t \t \t <img src="img4.jpg" alt=""> 
 

 
\t \t \t \t </li> 
 

 
\t \t \t 
 
\t \t \t \t <li class="slide"> 
 

 
\t \t \t \t \t \t <img src="img5" alt=""> 
 

 
\t \t \t \t </li> 
 

 
\t \t \t 
 
\t \t \t </ul> 
 

 
\t \t </div><!-- end left-side --> 
 

 
\t \t <!--end single furniture repeater--> 
 

 
\t \t \t 
 
</header><!-- .entry-header -->

Ma page est divisée en deux. La div englobant le côté gauche est la position statique. Le div englobant le contenu du côté droit est position fixe. Le problème que j'ai est, quand je réduis la largeur de l'écran, la position fixe à droite se chevauche dans le pied de page. Il y a aussi un div autour des deux côtés gauche et droit. J'apprécie toute réponse/suggestion! Faites-moi savoir si plus de contexte est nécessaire.

.left-side { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t width: 50%; 
 
} 
 

 
.right-side { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t margin-left: 50%; 
 
\t position: fixed; 
 
\t margin-right: $main-side-margins; 
 
}

Source

2017-06-14 awebdev

votre code html également publier –

après vous code complet ou créer une démo s'il vous plaît –

que vous rencontrez le problème que pour les petits appareils. Utilisez donc la requête '@ media' pour répondre et surpasser le CSS. S'il vous plaît fournir le code pour une meilleure compréhension. – acmsohail

.entry-header { 
 
    \t position: reletive; 
 
    } 
 
    .left-side { 
 
    \t display: flex; 
 
    \t flex-direction: column; 
 
    \t width: 50%; 
 
    } 
 

 
    .right-side { 
 
    \t display: flex; 
 
    \t flex-direction: column; 
 
    \t margin-left: 50%; 
 
    \t position: fixed; 
 
    \t margin-right: $main-side-margins; 
 
    }

<header class="entry-header"> 
 

 
\t \t <div class="right-side"> 
 
     
 
     <h1 class="entry-title">Desk</h1><p>$99</p><p>500x200x600</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie velit erat, nec porta diam fringilla vel. Nunc id euismod purus. Sed enim tellus, auctor a tempor eget, mattis sit amet massa. Etiam imperdiet elit eu faucibus vestibulum. Fusce ultrices ex quis turpis vulputate vehicula. Nulla laoreet vulputate nunc ac pretium. Pellentesque ac velit nec quam rhoncus sagittis eget porttitor lectus. Curabitur egestas vehicula lacinia. Proin ullamcorper, orci id dapibus viverra, libero ex imperdiet ex, quis lacinia dui dui vel est. Quisque condimentum nulla non elit rutrum, non mollis enim volutpat. Vestibulum mattis at magna sed porta. Cras venenatis ex dignissim nisl facilisis maximus. Integer efficitur vel augue vitae consequat. Sed ac fermentum lacus. Nulla facilisi.</p> 
 
    
 
\t \t 
 
\t \t \t <div class="before"> 
 

 
     <p>Before:</p> 
 

 
     <img class="beforeimage" src="img.jpg" alt="" /> 
 

 
\t \t \t </div><!-- end before --> 
 

 
\t \t </div><!--end right-side--> 
 
\t \t 
 
\t \t <!--repeater field--> 
 
\t \t <div class="left-side"> 
 
\t \t 
 
\t \t \t <ul class="slides"> 
 

 
\t \t \t 
 
\t \t \t \t <li class="slide"> 
 

 
\t \t \t \t \t \t <img src="img1.jpg" alt="Featured Desk"> 
 

 
\t \t \t \t </li> 
 

 
\t \t \t 
 
\t \t \t \t <li class="slide"> 
 

 
\t \t \t \t \t \t <img src="img2.jpg" alt="Featured Desk"> 
 

 
\t \t \t \t </li> 
 

 
\t \t \t 
 
\t \t \t \t <li class="slide"> 
 

 
\t \t \t \t \t \t <img src="img3.jpg" alt=""> 
 

 
\t \t \t \t </li> 
 

 
\t \t \t 
 
\t \t \t \t <li class="slide"> 
 

 
\t \t \t \t \t \t <img src="img4.jpg" alt=""> 
 

 
\t \t \t \t </li> 
 

 
\t \t \t 
 
\t \t \t \t <li class="slide"> 
 

 
\t \t \t \t \t \t <img src="img5" alt=""> 
 

 
\t \t \t \t </li> 
 

 
\t \t \t 
 
\t \t \t </ul> 
 

 
\t \t </div><!-- end left-side --> 
 

 
\t \t <!--end single furniture repeater--> 
 

 
\t \t \t 
 
</header><!-- .entry-header -->

Il suffit d'utiliser position:relative pour votre tête.

Source

2017-06-14 07:24:35

Cela ne semblait pas fonctionner. – awebdev

s'il vous plaît effacer, ce que vous voulez avec la mise en page? –

J'ai posté deux captures d'écran. C'est ce que j'ai actuellement. – awebdev

J'ai ajouté du JavaScript pour résoudre mon problème. J'ai aussi dû utiliser jQuery Waypoint. Ce que fait le code JavaScript, c'est déclencher une nouvelle classe qui rend le div "position: static" du côté droit une fois que le bas du div de gauche arrive dans la fenêtre. Cela empêche le côté droit de descendre plus bas que le côté gauche, évitant ainsi le chevauchement dans le pied de page. J'ai joint le code JS et quelques nouveaux CSS.

.right-side-to-static { 
 
\t position: static !important; 
 
\t margin-top: 115%; 
 

 
\t @media only screen and (max-width: 1370px) { 
 
    \t \t margin-top: 100%; 
 
\t } 
 
\t 
 
\t @media only screen and (max-width: 1140px) { 
 
    \t \t margin-top: 75%; 
 
\t } 
 

 
\t @media only screen and (max-width: 890px) { 
 
    \t \t margin-top: 50%; 
 
\t } 
 

 
\t @media only screen and (max-width: 820px) { 
 
    \t \t margin-top: 40%; 
 
\t } 
 

 
\t @media only screen and (max-width: 730px) { 
 
    \t \t display: none; 
 
\t } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
const $rs = $('.right-side'); 
 
const $ls = $('.left-side'); 
 

 
let rsHeight = $('.right-side').height(); 
 
let lsHeight = $('.left-side').height(); 
 

 
let counter = 0; 
 

 
console.log(rsHeight); 
 

 
$ls.waypoint(function(direction){ 
 

 
    counter++ 
 

 
    if(counter > 2){ 
 
     console.log('bottom in view...'); 
 
     $rs.toggleClass('right-side-to-static'); 
 
    } 
 

 

 
    
 
},{ 
 
//bottom-in-view will ensure event is thrown when the element's bottom crosses 
 
//bottom of viewport. 
 
offset: 'bottom-in-view' 
 
});

Source

2017-06-15 07:36:46 awebdev

de position chevauche en bas de page

Répondre

Questions connexes