javascript - 右 div 与左固定 div 重叠

Question

我有一个班级行，里面我有一个左 div 占 30% 和一个右 div 占 70%。我想让左边的 div 固定，这样当我滚动时它保持它的位置。但是，当我使用固定在左 div 上的位置时，右 div 就会出现。我该如何解决这个问题？

这是我的代码片段：

div .profile_left{
border: 1px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 0px;
overflow-wrap: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
-ms-hyphens: auto;
text-align: center;
 }

<div class="container">
{% block content %}
    <div class="row">
        <div class="profile_left col-lg-8 col-md-8 col-sm-8 
         col-xs-12" style="width: 30%;">
           <div style="background-color: #01226c; text- 
            align:center; padding:20px;">
           <h3 style="color: white;"><strong>PROFILE</strong> 
            </h3>
            </div>
         </div>


<div class="profile_right col-lg-8 col-md-8 col-sm-8 col-xs- 
12" style="width: 70%;">
  <div style="background-color:white; 
   overflow:hidden; padding:20px; border-radius:5px; margin- 
    bottom:10px;" class="contact_info">
    <h4 style="float: left; margin-bottom: 10px; 
    <strong>Contact Information</strong></h4>
   </div>
</div>                

标签： javascripthtmlcss

Answer 1

像往常一样保持导航（左侧框）固定和页面（内容框），左边距等于导航。

JSFiddle：https ://jsfiddle.net/SKJoy2001/7z32egqn/26/

HTML

<div class="Page">
  <div class="Navigation">
    <h2>Sticky navigation</h2>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
  </div>
  <div class="Content">
    <h1>Regular content</h1>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
    <p>Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet Lorem Ipsum Doler Sit Amet</p>
  </div>
</div>

CSS

:root{
  --PageWidth: 640px;
  --NavigationWidth: 200px;
}

body{margin: 0; font-family: Verdana, Tahoma, Arial; font-size: 16px; line-height: 1.62;}
div{box-sizing: border-box;}

.Page{width: var(--PageWidth); margin: auto; background: Lime;}
.Page > .Navigation{position: fixed; width: var(--NavigationWidth); background: Cyan; padding: 15px;}
.Page > .Content{margin-left: var(--NavigationWidth); background: Pink; padding: 15px;}