Question

我尝试创建2个div，其中一个是左侧边栏，另一个是内容显示的页面正文。我想做的是：

使侧边栏高度为100％
身高100％
当侧边栏宽度发生变化时，身体的宽度会发生变化。

这是我迄今为止尝试过的代码：

#Sidebar{
  background-color:#F0F0F0;
  height: calc(100% - 80px);
  width: 257px;
  position: fixed;
  left: 0;
  bottom: 0;
  overflow: hidden;
  white-space: nowrap;
}

#content {
  margin: 0;
  position: fixed;
  height: 100%;
}

当我这样做时，内容div显示在补充工具栏中！

＆＃13;

#Sidebar {
    height: calc(100% - 80px);
    width: 257px;
    position: fixed;
    top:0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    border:1px solid #000;
}
#content {
    margin: 0;
    position: fixed;
    height: 100%;
    border:1px solid tomato;
}

＆＃13;

<div id="Sidebar">
  Hello World!!
 </div>
<div id="content">
  Content Div
</div>

＆＃13;

＆＃13; 请注意，我使用Jquery .Resizable来更改宽度。这是一个jsfiddle https://jsfiddle.net/j64r3bm1/

Answer 1

您只需添加

即可

left: 257px;
top: 0;

到#content div，它会出现你想要的样子。要调整大小，你可以调整它。另一种方法是使用容器，如下所示：

#Container {
    height: 100%;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
}

#Sidebar {
    height: calc(100% - 80px);
    width: 257px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    border:1px solid #000;
}
#content {
    margin: 0;
    height: 100%;
    border:1px solid tomato;
}

<div id="Container">
  <div id="Sidebar">
    Hello World!!
   </div>
  <div id="content">
    Content Div
  </div>
</div>

Answer 2

将主要内容的margin-left设置为相同的宽度（如果您愿意，请设置+间隙），并在调整侧边栏大小时更改它。

#content {
    margin-left: 257px;

更新了小提琴：https://jsfiddle.net/j64r3bm1/2/

要解释发生了什么：当你使用position:fixed时，它不再占用空间并有效地“悬停”在页面上，所以当你的内容div出现时，它会被放在左边：0因为它们'在它的左边没有任何东西占据了页面上的空间。

你也可以在你的内容上使用position:fixed并设置左边 - 但是它们都不会占用100％的高度（因为它们都是0width / 0height）。

或者，您可以取出position:fixed并使用float:left。

Answer 3

这就是解决方案：

＆＃13;

var offsetHeight = document.getElementById('Sidebar').offsetHeight;
document.getElementById('content').style.height = offsetHeight+'px';

＆＃13;

#Sidebar{
background-color:#F0F0F0;
height: 700px;
width: 10%;
float:left;
left: 0;
bottom: 0;
overflow: hidden;

}
#content {
margin: 0;
width:90%;
float:right;
background-color:green;
}

＆＃13;

<div id="Sidebar">
Side bar
</div>
<div id="content">
Hello World !
</div>

＆＃13;

Answer 4

你不能只放侧边栏

.sidebar {
    position: fixed;
    height: 100vh;
    left: 0px;
    top: 0px;
    width: 275px;
}

和身体容器

body {
    padding-left: 275px;
}

它永远不会重叠，您可以按照自己的意愿建立自己的身体。有趣的是，当您使用媒体查询来处理移动版本时 - 您可以删除填充并移动正文以外的正文和某些按钮（或任何内容）使其滑入视图。

Answer 5

我会给你一个答案，我已经在firefox和chrome中测试了这个并且它有效。但它有点尖端，所以我不确定IE是否会支持它。

它使用css变量，如果你在开始时有一个不同的变量（在：根部分），那么页面的计算方式会不同。

我还把你的边框拿出来，因为它们弄乱了总宽度并使用了背景颜色来区分div。

修改

我添加了少量的JS来显示变量即时更新，所有内容都重新调整。

changeSidebar = function() { var customSize = document.querySelector('.sidebar-width').value; document.documentElement.style.setProperty('--menu-width', customSize + 'px'); }

:root { --menu-width: 257px } #sidebar, #sidebar-footer { width: var(--menu-width); left: 0; overflow: hidden; position: fixed } body { margin: 0 } #sidebar { height: calc(100% - 80px); top: 0; white-space: nowrap; background: orange } #sidebar-footer { height: 80px; top: calc(100% - 80px); background: pink } #content { position: fixed; right: 0; width: calc(100% - var(--menu-width)); height: 100%; background: tomato }

<div id="sidebar"> Hello World!! </div> <div id="sidebar-footer"> I'm just here to fill that space... </div> <div id="content"> Content Div <br /> <input class="sidebar-width" value='257'> <button onclick="changeSidebar();">Enter</button> </div>

Answer 6

看起来我想出了怎么做。我使用JQuery来做到这一点，我所做的就是：

#Sidebarlist
{
    background-color: var(--SidebarBackgroundColor);
    height: calc(100% - 80px);
    color:var(--SidebarTextColor);
    width: 257px;
    position: fixed;
    left: 0;
    bottom: 0;
    overflow:hidden;
    white-space: nowrap;
}
#MainContentdiv {
    height: 100%;
}

使用jquery：

$('#Sidebarlist').resizable({
       start: function( event, ui ) {},
       stop: function( event, ui ) {},
       handles: 'n,w,s,e',minWidth: 200,
       maxWidth: 400
});
$( "#Sidebarlist" ).on( "resizestart", function( event, ui ) {
     var marginleft = $("#Sidebarlist").width();
     $('#MainContentdiv').css('margin-left',marginleft);
});
$( "#Sidebarlist" ).on( "resizestop", function( event, ui ) {
    var marginleft = $("#Sidebarlist").width();
    $('#MainContentdiv').css('margin-left',marginleft);
});

感谢任何回答我问题的人。

如何以固定位置和100％高度将2个div放在彼此旁边

6 个答案: