位置固定元件被重叠到页脚

enter image description here 位置固定元件被重叠到页脚

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

我的页面被分成两半。包含左侧的div位置是静态的。包含右侧内容的div是位置固定的。我遇到的问题是，当我缩小屏幕宽度时，右侧的固定位置与页脚重叠。在左右两边还有一个div。我很欣赏任何答案/建议！让我知道是否需要更多的上下文。

.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; 
 
}

来源

2017-06-14 awebdev

发表您的HTML也 –

后您完整的代码或创建演示请 –

您遇到的问题仅用于小型设备。因此，使用'@ media'查询来响应并覆盖CSS。请提供更好的理解代码。 – 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 -->

只需使用position:relative你的头。

来源

2017-06-14 07:24:35

这似乎没有工作。 – awebdev

请清楚，你想要什么布局？ –

我发布了两个屏幕截图。这是我现在拥有的。 – awebdev

我加了一些JavaScript来解决我的问题。我也不得不使用jQuery Waypoint。 JavaScript代码所做的是触发一个新的类，一旦左侧div的底部进入窗口视图，该类将右侧div“position：static”。这样可以防止右侧比左侧低，从而防止重叠到页脚中。我附上了JS代码和一些新的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' 
 
});

来源

2017-06-15 07:36:46 awebdev

位置固定元件被重叠到页脚

回答

相关问题