gpt4 book ai didi

width - 100% 宽度水平溢出滚动的全屏网站

转载 作者:行者123 更新时间:2023-11-28 18:30:24 26 4
gpt4 key购买 nike

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

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

我希望你能理解我,这是我的代码:

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

最佳答案

我能够通过以下经过调整的 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;
}

希望这对您有所帮助!

关于width - 100% 宽度水平溢出滚动的全屏网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14510923/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com