blocks|key|4991385|text|这个问题可以用两种不同的方法来解决：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4991386|4991387|I.侧边和车身都有自己的滚动条|4991388|在这种情况下，sidebar将拥有自己的滚动条，main也将拥有自己的滚动条。当您不想在滚动主要内容时滚动侧边栏时，这种方法是很好的。|offset|length|style|CODE|4991389|将包装器设置为全页面维度：|4991390|.wrapper+{
++++position:+fixed;
++++top:+0;
++++left:+0;
++++right:+0;
++++bottom:+0;
}|code-block|syntax|javascript|4991391|侧边栏的CSS将是：|4991392|.sidebar+{
++++background:+blue;
++++width:+20%25;
++++height:+100%25;
++++float:+left;
++++overflow:+auto;
}|4991393|和你的主div：|4991394|.main+{
++++background:+red;
++++height:+100%25;
++++overflow:+auto;
}|4991395|4991396|[!]你可以在FIDDLE.|unordered-list-item|4991397|上查看这个方法|4991398|4991399|II.侧边和正文将通过包装器滚动|4991400|在这种情况下，sidebar和main内容都将由主wrapper滚动。要创建这个，只需float侧边栏和主要内容。|4991401|.main+{
++++background:+red;
++++width:+80%25;
++++float:+left;
}
.sidebar+{
++++background:+blue;
++++width:+20%25;
++++float:+left;
}|4991402|4991403|4991404|4991405|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/mojtaba/WkSaR/1/|1|http://jsfiddle.net/mojtaba/WkSaR/2/^0|0|0|0|7|7|O|4|0|0|0|0|0|0|0|0|0|3|7|6|0|0|0|0|0|7|7|F|4|P|7|17|5|0|0|0|0|3|7|6|1|0|0^^$0|@$1|2|3|4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|C|3|D|5|6|7|1R|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|1S|8|@$G|1T|H|1U|I|J]|$G|1V|H|1W|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|1X|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1Y|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|T|3|U|5|O|7|20|8|@]|9|@]|A|$P|Q]]|$1|V|3|W|5|6|7|21|8|@]|9|@]|A|$]]|$1|X|3|Y|5|O|7|22|8|@]|9|@]|A|$P|Q]]|$1|Z|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|10|3|11|5|12|7|24|8|@$G|25|H|26|I|J]]|9|@$G|27|H|28|1|29]]|A|$]]|$1|13|3|14|5|6|7|2A|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|2B|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|2C|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|2D|8|@$G|2E|H|2F|I|J]|$G|2G|H|2H|I|J]|$G|2I|H|2J|I|J]|$G|2K|H|2L|I|J]]|9|@]|A|$]]|$1|1A|3|1B|5|O|7|2M|8|@]|9|@]|A|$P|Q]]|$1|1C|3|-4|5|6|7|2N|8|@]|9|@]|A|$]]|$1|1D|3|11|5|12|7|2O|8|@$G|2P|H|2Q|I|J]]|9|@$G|2R|H|2S|1|2T]]|A|$]]|$1|1E|3|14|5|6|7|2U|8|@]|9|@]|A|$]]|$1|1F|3|-4|5|6|7|2V|8|@]|9|@]|A|$]]]|1G|$1H|$5|1I|1J|1K|A|$1L|1M]]|1N|$5|1I|1J|1K|A|$1L|1O]]]]

<p>This problem can be solved in two different ways:</p>
<hr>
<h2>I. The SIDE and BODY has own scrollers</h2>
<p>In this case, <code>sidebar</code> will has own scrollbar, and <code>main</code> will has own scrollbar too.
This method is good when you don't want to scroll your sidebar, while scrolling the main content.</p>
<p>Make your wrapper in full page dimension:</p>
<pre><code>.wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</code></pre>
<p>And CSS for sidebar will be:</p>
<pre><code>.sidebar {
    background: blue;
    width: 20%;
    height: 100%;
    float: left;
    overflow: auto;
}
</code></pre>
<p>And your main div:</p>
<pre><code>.main {
    background: red;
    height: 100%;
    overflow: auto;
}
</code></pre>
<ul>
<li><code>[!]</code> You can check this method at <a href="http://jsfiddle.net/mojtaba/WkSaR/1/" rel="nofollow noreferrer">FIDDLE</a>.</li>
</ul>
<hr>
<h2>II. The SIDE and BODY will scroll by WRAPPER</h2>
<p>In this case, both <code>sidebar</code> and <code>main</code> content will be scroll by the main <code>wrapper</code>.
For creating this, just <code>float</code> both sidebar and main content.</p>
<pre><code>.main {
    background: red;
    width: 80%;
    float: left;
}
.sidebar {
    background: blue;
    width: 20%;
    float: left;
}
</code></pre>
<ul>
<li><code>[!]</code> You can check this method at <a href="http://jsfiddle.net/mojtaba/WkSaR/2/" rel="nofollow noreferrer">FIDDLE</a>.</li>
</ul>


blocks|key|95369|text|给定您提供的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|95370|<div+class="wrapper">
++++<div+class="sidebar"></div>
++++<div+class="main"></div>
</div>|code-block|syntax|javascript|95371|我认为这个css将会做你想要的：|95372|.sidebar+{
++++float:left;
++++width:20%25;
}

.main+{
++++margin:0+0+0+20%25;
}|95373|假设您不希望.main+div内容包装在.sidebar+div内容之下；并且.main将占用父.wrapper宽度的剩余空间。|95374|支持也应该回溯到过去。|95375|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Given the code you provided:</p>

<pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="sidebar"&gt;&lt;/div&gt;
    &lt;div class="main"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I think this css will do what you're asking:</p>

<pre><code>.sidebar {
    float:left;
    width:20%;
}

.main {
    margin:0 0 0 20%;
}
</code></pre>

<p>Just assuming you don't want the .main div content wrapping below the .sidebar one; and .main will take the remaining space of however wide the parent .wrapper is.</p>

<p>Support should go back a ways, too.</p>


blocks|key|4991444|text|这里提供了您的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4991445|http://jsfiddle.net/YKPy5/|offset|length|4991446|<pre>
++++<div+class="wrapper">
++++++<div+class="main">
++++++++<div+class="sidebar">Lorem+ipsum+dolor+sit+amet,+consectetuer+adipiscing+elit.+Aenean+commodo+ligula+eget+dolor.
++++++++</div>
++++++</div>
++++</div>


++.wrapper+{
++++background:+000;
++++width:+100%25;
++++margin:+0;
++++padding:+0;
++++min-height:+200px;
}
++.main+{
++++background:+red;
++++display:+inline-block;
++++min-height:+200px;
}
++.sidebar+{
++++background:+blue;
++++width:+20%25;
++++min-height:+200px;
++++display:+inline-block;
}

</pre>|code-block|syntax|javascript|4991447|请注意:没有宽度，任何inline+/+inline-block元素都不会创建任何空格。你必须添加内容/文本才能获得效果。|4991448|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Q|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

<p>here with your solution</p>

<p><a href="http://jsfiddle.net/YKPy5/" rel="nofollow">http://jsfiddle.net/YKPy5/</a></p>

<pre><code>&lt;pre&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="main"&gt;
        &lt;div class="sidebar"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;


  .wrapper {
    background: 000;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 200px;
}
  .main {
    background: red;
    display: inline-block;
    min-height: 200px;
}
  .sidebar {
    background: blue;
    width: 20%;
    min-height: 200px;
    display: inline-block;
}

&lt;/pre&gt;
</code></pre>

<p>please note: without width any inline / inline-block element do not create any space. you have to add content / text to get the effect,</p>


<p>Trying to float two divs within a wrapper div, where only the sidebar has a %-based width. The main div needs to stretch based on the width of the sidebar, filling the remaining area of the wrapper (i.e. it doesn't have a width set itself).</p>

<pre><code>&lt;div class="wrapper"&gt;
   &lt;div class="sidebar"&gt;&lt;/div&gt;
   &lt;div class="main"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is the <a href="http://jsfiddle.net/BphXG/4/" rel="nofollow">fiddle</a> to get the idea:</p>

<p>I've tried all kinds of variations of <code>inline-block</code>, <code>float:left</code>, <code>float:right</code> etc and just can't seem to get it to work. </p>


Floating a div without setting a width

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

尝试在一个包装器div中浮动两个div，其中只有侧边栏具有基于%的宽度。主div需要根据侧边栏的宽度进行拉伸，填充包装器的剩余区域(即它本身没有宽度设置)。<div class="wrapper">   <div class="sidebar"></div>   <div class="main"></div></di...

问浮动div而不设置宽度
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浮动div而不设置宽度EN