Question

如果有人能帮我解决这个问题，我感激不尽，因为我无法让它发挥作用。

基本上，我希望右侧导航栏与灰色主要内容区域（并排）处于同一级别。现在它（灰色主要内容区域）自动扩展并填满100％，即使我尝试像margin-right：-100px。它应该ob the填充空间直到导航div。

问题是主要的div需要可滚动，因为我需要填充很多内容，以便我和一些朋友之间进行一些协作项目。因此需要将其设置为overflow：auto;确保它运作良好。有没有办法将导航div鞭打到位？请注意，我需要主内容区域来占用nav div未提交的剩余空间。

顺便说一下，高度是固定的，直到我得到导航div到位。如果你们也可以向我指出我如何才能使这两者“扩大”＃34;根据需要，这将是非常棒的。我的google fu技能看起来不够强大。

HTML

    <div id="main">
    text goes here
    </div>


    <div id="navigation">
        <br>
        <ul>
            <li> item </li>
            <li> item </li>
        </ul>

    </div>

</div>

</body>
</html>

的CSS #wrapper指定 { 宽度：100％; 身高：100％; 背景颜色：白色; }

#main 
{

height: 400px;
float: left;
background-color: gray;
border: 1px solid black;
overflow: auto;
width: 100%;

}

#navigation
{
float: right;
width: 150px;
height: 400px;
background-color: yellow;
overflow: auto;

}

编辑：抱歉。似乎无法在移动设备上获得代码部分！将在15小时内编辑

Answer 1

您可以使用calc函数作为宽度。

<强> JSFiddle

#main 
{
height: 400px;
float: left;
background-color: gray;
border: 1px solid black;
overflow: auto;
width: calc(100% - 152px);
}

请记住，-152来自宽度填充和#navigation边框的总和。另请注意，calc函数有less that desirable cross-browser support。

另一种解决方案需要更改html。如果你想使用它，请大声喊叫，我会做一个例子。

Answer 2

以下是您的问题的解决方案

.wrapper{
    position:relative; 
    background:white; 
    height:100%; 
    min-height:300px;
    //if the height of the box increases other div increase there size automatically. 
}
.navigation{
    width:200px; 
    background:red; 
    position:absolute; 
    right:0px; 
    height:100%; 
    overflow: auto;
}
.main{height:100%; 
    width:calc(100% - 200px); 
    background:yellow; 
    position:absolute; 
    overflow: auto;
}

<div class="wrapper">

	<div class="navigation">navigation</div>
	
	<div class="main">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>

您必须在CSS中进行一些更改才能解决问题。

Answer 3

我开始了一个新的答案，因为我的第一个答案并未将导航保持在视野中，这似乎是您想要的。新答案与Vipin非常相似。

绝对定位

在这种技术中，我们使用绝对定位。这意味着您可以使用左侧，右侧，顶部，底部属性根据父容器边缘的距离放置项目。不允许父容器具有position：static，这就是#wrapper具有position：relative的原因。

<强> #navigation

我们定位导航绝对。我们使用top：0;和右：0;把它放在容器的右上角。我还建议设置底部：0;所以浏览器根据父容器计算高度。它有溢出：auto;适用于导航列表最终太长而无法正常使用的情况。

<强> #main

我将#main simular定位到#navigation，除了绝对定位的值不同。我用的是：150px; （= #navigation的宽度）因此#navigation不会与此#main重叠。

<强> JSFiddle

<强> HTML

<div id="wrapper">
    <div id="main">
        <div>text goes here</div>
    </div>
    <div id="navigation">
        <ul>
            <li> item </li>
            <li> item </li>
        </ul>
    </div>
</div>

<强> CSS

#wrapper{
    position: relative; /*allows absolute positioned children*/
    height: 100%;
    width: 100%;
}

#main {
position: absolute;
left: 0px;
top: 0px;
right: 150px;
height: 400px;
background-color: gray;
overflow: auto;
}

#main div{
    height: 1000px;
    width: 100%;
    background-color: red;   
}
#navigation{
position: absolute;
right: 0px;
top: 0px;
/*float: right;*/
width: 150px;/*you can replace this by bottom: 0; if you want to use the height of the wrapper*/
height: 400px;
background-color: yellow;
overflow: auto;
}

如果您还有其他问题，请再次发表评论。

放置右侧div和并排设计

3 个答案: