1. 首页
  2. 问答
  3. 独立滚动3列与单独的列标题

独立滚动3列与单独的列标题

2017-06-21 38 views
-2

我已创建html独立滚动面板与个别列的固定标题&页脚3列。独立滚动3列与单独的列标题

我附上了线框供您参考。

问题1：我的代码中是否有问题？ Q2：在响应式设计过程中是否会出现问题？

html, body { 
 
     height: 99%; 
 
     box-sizing: border-box; 
 
     overflow: hidden; 
 
     margin: 0px; 
 
    } 
 

 
    .container { 
 
     max-height: 100%; 
 
     overflow: auto; 
 
     margin-top: 100px; 
 
    } 
 
    .col-1{ 
 
     float: left; 
 
     width: 20%; 
 
     position: relative; 
 
     height: calc(100vh - 140px); 
 

 
    } 
 
    .col-2{ 
 
     float: left; 
 
     width: 20%; 
 
     position: relative; 
 
     height: calc(100vh - 140px) 
 
    } 
 
    .col-3{ 
 
     float: left; 
 
     width: 60%; 
 
     position: relative; 
 
     height: calc(100vh - 140px) 
 
    } 
 
    .header, .footer,.header2, .footer2 ,.header3, .footer3 { 
 
     height: 40px; 
 
     
 
     position: fixed; 
 
     margin-top: 60px; 
 
     
 
    } 
 
    .header { 
 
     top: 0; 
 
     left: 20%; 
 
     width:20%; 
 
     background-color: #dddddd; 
 
    } 
 
    .footer { 
 
     bottom: 0; 
 
     left: 20%; 
 
     width:20%; 
 
     background-color: #dddddd; 
 
    } 
 
    .header2 { 
 
     top: 0; 
 
     left: 0%; 
 
     width:20% ; 
 
     background-color: #eeeeee; 
 
    } 
 
    .footer2 { 
 
     bottom: 0; 
 
     left: 0; 
 
     width:20% ; 
 
     background-color: #eeeeee; 
 
    } 
 
    .header3 { 
 
     top: 0; 
 
     left: 40%; 
 
     width:60% ; 
 
     background-color: #cccccc; 
 
    } 
 
    .footer3 { 
 
     bottom: 0; 
 
     left: 40%; 
 
     width:60% ; 
 
     background-color: #cccccc; 
 
    } 
 
    header{ position: fixed; width: 100%; height: 60px; background: #666666 } 
 
    ul{ list-style: none; padding:0px; } 
 
    ul li { list-style-type: none; display: block; padding:20px 10px; margin:0px; border-bottom: 1px solid #dddddd }
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
</head> 
 
<body> 
 
<header>Header</header> 
 
    <div class="container col-1"> 
 
    <div class="header"> 
 
     Fixed Header 
 
    </div> 
 
    <ul> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
    </ul> 
 
    <div class="footer"> 
 
     Fixed footer 
 
    </div> 
 
    </div> 
 
    <div class="container col-2"> 
 
    <div class="header2"> 
 
     Fixed Header 
 
    </div> 
 
    <div class="content"> 
 
    <ul> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
     <li>Listing</li> 
 
    </ul> 
 
    </div> 
 
    <div class="footer2"> 
 
     Fixed footer 
 
    </div> 
 
    </div> 
 
    <div class="container col-3"> 
 
    <div class="header3"> 
 
     Fixed Header 
 
    </div> 
 
    <div class="content"> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 
    <div class="footer3"> 
 
     Fixed footer 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2017-06-21 Subh

+0

的骨架你想这些元素来保持固定在这些位置有一个滚动条？ – divine

+1

，我想要咖啡。你有什么努力去实现这一目标？你的代码在哪里？ –

+0

是的！我希望这些元素保持固定在滚动条的这些位置，我应该稍后作出响应 – Subh

回答

0

首先，您发布的问题是不是那种由计算器受理问题。如果你遵守SO标准，会更好。

看看我的笔。通过查看您的线框图像，我想出了这个简单的布局。

codepen

下面是布局

<div class="main_container"> 
<!-- main container --> 
    <div class="header"> 
      header 
    </div> 
    <div class="content"> 
    <!-- content --> 
     <div class="content_left"> 
     <!-- content_left --> 
      <div class="cl_head"> 
       Fixed Header 
      </div> 
      <div class="cl_body"> 
      </div> 
      <div class="cl_foot"> 
       Fixed Footer 
      </div> 
     </div> 
     <div class="content_container"> 
      <div class="content_center"> 
      <!-- content_center --> 
       <div class="cc_head"> 
        Fixed Header 
       </div> 
       <div class="cc_body"> 

       </div> 
      </div> 
      <div class="content_right"> 
      <!-- content_right --> 
       <div class="cr_head"> 
        Fixed Header 
       </div> 
       <div class="cr_body"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2017-06-21 11:59:21 divine

+0

非常感谢Devine。 你已经解决了我的问题，我会将它留在我的脑海中以备将来。 – Subh

+0

@Subh很高兴我能帮上忙。接受我的答案，因为它回答你的问题。 – divine

+0

左侧面板不滚动，但没关系，我会从自己处理它。 – Subh

相关问题

 相关问题