Fatal编程技术网
  • html/
  • Html 带直列div的固定侧面板

Html 带直列div的固定侧面板

html scroll css

Html 带直列div的固定侧面板,html,scroll,css,Html,Scroll,Css,我试图弄清楚如何在html中创建以下布局 我想有一个固定宽度的面板，总是在左边可见。然后，右边的另一个面板包含可变数量的div。右边的面板应该适合剩余的屏幕大小，如果其中有两个或多个div，则显示一个滚动条 如果有人能让我知道怎么做，那就太棒了。到目前为止，由于种种原因，我所尝试的一切都没有奏效 谢谢， 内森 我当前的代码： JSFiddle： 这里的问题是，当屏幕变得足够小时，第二个滚动条出现在主体上，以便在比较面板中看到最后一个div的右边缘，我必须在两个滚动条上滚动 .audit_log

我试图弄清楚如何在html中创建以下布局

我想有一个固定宽度的面板，总是在左边可见。然后，右边的另一个面板包含可变数量的div。右边的面板应该适合剩余的屏幕大小，如果其中有两个或多个div，则显示一个滚动条

如果有人能让我知道怎么做，那就太棒了。到目前为止，由于种种原因，我所尝试的一切都没有奏效

谢谢， 内森

我当前的代码： JSFiddle：

这里的问题是，当屏幕变得足够小时，第二个滚动条出现在主体上，以便在比较面板中看到最后一个div的右边缘，我必须在两个滚动条上滚动

.audit_log {
    white-space: nowrap;
}

.event_panel {
    display: inline-block;
    width: 160px;
}

.comparison_panel {
    display: inline-block;
    max-width: 80%;
    overflow-x: auto;
    vertical-align: top;
}

.event_details {
    display: inline-block;
    white-space: normal;
    width: 200px;
}

<body>
<div class="audit_log">
    <div class="event_panel">
    </div>
    <div class="comparison_panel">
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
    </div>
</div>
</body>
下面是一个问题示例，请注意两个滚动条

.audit_log {
    white-space: nowrap;
}

.event_panel {
    display: inline-block;
    width: 160px;
}

.comparison_panel {
    display: inline-block;
    max-width: 80%;
    overflow-x: auto;
    vertical-align: top;
}

.event_details {
    display: inline-block;
    white-space: normal;
    width: 200px;
}

<body>
<div class="audit_log">
    <div class="event_panel">
    </div>
    <div class="comparison_panel">
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
        <div class="event_details">
            <p>I Am Details</p>
        </div>
    </div>
</div>
</body>
我修改了你的代码，这是JSFIDLE。这就是你想要的吗

<div class="child_fixed">fixed one</div>
<div class="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>


 .child_fixed {
     position:fixed;
     height:200px;
     background-color:yellow;
 }
 .parent {
     position:relative;
     left:65px;
     white-space:nowrap;
     max-width:200px;
     overflow:scroll;
 }
 .parent > div {
     display:inline-block;
     height:200px;
     white-space:normal;
     width:80px;
     background:red;
 }
那是因为外包装太小了。试试这个：

基本上，滚动元素的父元素是其父元素的100%，因此其他滚动条不会显示。

您可以为您现有的代码添加一个JSIDdle链接到js FIDdle吗？如果您将页面缩小，您会注意到第二个滚动条会出现。这就是我想要避免的。哦..所以你不希望出现高度的第二个滚动条？高度很好，但有两个水平滚动条。嘿@Nath5你认为这个新提琴很近吗？很近，但父项中的div需要有一个最小宽度，如果你加上这个，然后缩小窗口宽度，你会看到第二个滚动条。我已经用你的例子和上面我的例子添加了一个问题的屏幕截图。谢谢你的帮助有什么想法吗？您可以看到我试图避免的第二个滚动条。您的示例左侧没有固定宽度的面板。如果你把它加进去，你就会发现问题所在。