1

我的代码有一个问题，我找不到解决方案。我有左侧边栏 w: 300px h:100% ，我希望右侧 div （内容区域）为 w: 100% 和 h:100% 并带有水平滚动条..

但是我的代码有问题，我无法弄清楚，右边的 div 越过了侧栏，如果我放 margin-left:300px，那么它们 300px 会添加到 100px 的权重上。

我希望你能理解我，这是我的代码：

HTML：

<div id="wrapper">
   <?php include '../side_bar.php' ?>

    <div id="content">
       <div id="scroll">
        <img src="../images/design1.jpg" width="759" height="565"> 
        <img src="../images/design1.jpg" width="759" height="565"> 
        <img src="../images/design1.jpg" width="759" height="565"> 
       </div>
    </div>
</div>

CSS：

body, html {
    margin: 0;
    padding: 0;
    height:100%;
    width:100%;
}

#wrapper {
    width:100%;
    height:100%;
    display:inline-block;
}

#side_bar {
    float:left;
    width:300px;
    height:100%;
    position:fixed;
    border-right:#000 solid 1px;
}

#content {
    float:left;
    height:100%;
    width:100%;
    position:fixed;
}

#scroll {
    height:100%;
    width:100%;
    display:inline-block;
    position:absolute;
    overflow-x:scroll;
    overflow-y:hidden;  
    white-space: nowrap; 
}
4

2 回答 2

1

通过以下调整后的 CSS，我能够获得您想要的功能：

body, html {
margin: 0;
padding: 0;
height:100%;
width:100%;
}
#wrapper {
width:100%;
height:100%;
display:inline-block;
}

#side_bar {
/*float:left;*/
top:0;
left:0;
width:300px;
height:100%;
position:fixed;
border-right:#000 solid 1px;
background-color:#333;
}

#content {
/*float:left;*/
top:0;
left:0;
height:100%;
width:100%;
position:fixed;
}

#scroll {
height:100%;
/*width:100%;*/
right:0px;
left:301px; /*Because of border */
display:inline-block;
position:absolute;
overflow-x:scroll;
overflow-y:hidden;  
white-space:nowrap;
}

希望这会有所帮助！

于 2013-01-24T21:34:42.840 回答
0

您可以使用 jQuery 的fullPage.js插件轻松创建全屏网站：

它不仅提供了一种创建垂直部分的方法，还提供了水平部分。

一些优点：

  • Auto scrolling moving the mouse wheel
  • Use of anchors(#) in the URL
  • Compatible with touch devices
  • Compatible with old browsers (> IE7)
  • Provides callbacks and lots of useful functions
  • Strongly tested in different devices
于 2014-12-10T15:56:15.883 回答