如何在2个可滚动的垂直页面中划分页面?

时间:2016-06-06 15:31:53

标签: html

如何将我的页面分成两个单独的“列”,它们都可以滚动?

<table width=100% height=100%>
   <tr>
       <td width=50%><a style='margin-top:130%'></a>
      </td>
       <td width=50%>Put page2 here
      </td>
   </tr>
 </table>

2 个答案:

答案 0 :(得分:0)

请使用CSS,而不是使用表格进行布局。 It is really not a good idea to use tables for layout purposes.这是一个简单的版本。

&#13;
&#13;
.left, .right {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background: #ccf;
  overflow: auto;
}
.right {
  left: 50%;
  right: 0;
  background: #cfc;
}
&#13;
<div class="left">
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
</div>
<div class="right">
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
  Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept.<br />
  However, you aren’t invisible. Going incognito doesn’t hide your browsing from your employer, your internet service provider, or the websites you visit.<br />
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以使用float或绝对定位来执行此操作。以下是使用浮动的解决方案。

我添加了overflow:scroll来演示滚动条。

html, body, div {
    height: 100%;
    margin: 0;
}
div {
    width: 50%;
    float: left;
    overflow: scroll;
}
<div></div>
<div></div>