我的问题是，如果你事先不知道父div的大小，有没有办法，不使用JavaScript，导致子div扩展到其父级的边界，而不超过这些边界？
以下示例标记/样式演示了我的问题。如果您将其加载到浏览器中，您会看到#two和#three都延伸到其父级#one之外，并导致滚动条出现。
我的问题不在于滚动条，而是我不知道如何告诉子div占用剩余的宽度或高度，而不是父级的全高或宽度。
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>
答案 0 :(得分：22)
我有类似的问题，但在我的情况下，我在div中有内容，高度方面将超过父div的边界。当它，我希望它自动滚动。我能够通过使用
来实现这一目标.vscrolling_container { height: 100%; overflow: auto; }
答案 1 :(得分：17)
您可以使用display: inline-block;
希望它有用。
答案 2 :(得分：9)
在您的示例中，您不能：5px margin被添加到div#two和div#three的边界框，有效地使其宽度和高度为父级的5％+ 5px，会溢出。
您可以在父元素上使用padding以确保其边框内有5px个空格：
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
#one {padding:5px;width:500px;height:300px;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
编辑：在测试中，从width:100%移除div#two实际上会让它正常工作，因为div是块级别，并且默认情况下将始终填充其父级的宽度。如果你想使用保证金，这应该清除你的第一个案例。
答案 3 :(得分：5)
通常使用两种技术：
鉴于您在此提供的HTML是使用绝对定位的解决方案：
body #one {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
}
body #two {
width: auto;
}
body #three {
position: absolute;
top: 60px;
bottom: 0;
height: auto;
}<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body
你总是可以直接使用table，tr和td元素，尽管有共同的批评，因为它可以完成工作。如果你更喜欢使用CSS，那么没有colspan的等价物，所以你最终可能会遇到嵌套表。这是一个例子：
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#one {
box-sizing: border-box;
display: table;
height: 100%;
overflow: hidden;
width: 100%;
border: 1px solid black;
}
#two {
box-sizing: border-box;
display: table;
height: 50px;
padding: 5px;
width: 100%;
}
#three {
box-sizing: border-box;
display: table;
height: 100%;
padding-bottom: 60px;
padding-left: 5px;
}
#four {
display: table-cell;
border: 1px solid black;
}
#five {
display: table-cell;
width: 100px;
border: 1px solid black;
}
#six {
display: table-cell;
}<html>
<div id="one">
<div id="two">
<div id="four"></div>
</div>
<div id="three">
<div id="five"></div>
<div id="six"></div>
</div>
</div>
</html>
答案 4 :(得分：4)
对于宽度，这很容易，只需删除width: 100%规则即可。默认情况下，div将拉伸以适合父容器。
身高不是那么简单。您可以执行类似equal height column trick。
的操作html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:500px;height:300px; overflow: hidden;}
#two {height:50px;}
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}
答案 5 :(得分：2)
关闭，我认为这个问题的答案是没有解决方案。获得我想要的行为的唯一方法是使用javascript。
答案 6 :(得分：2)
确保最外面的div具有以下CSS属性：
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.foodie">
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:xlargeScreens="true" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA"/>
<!--
The ACCESS_COARSE/FINE_LOCATION permissions are not required to use
Google Maps Android API v2, but you must specify either coarse or fine
location permissions for the 'MyLocation' functionality.
-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<application
android:name=".Facebook"
android:allowBackup="true"
android:icon="@drawable/logo"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
<activity android:name="com.facebook.FacebookActivity"
android:configChanges=
"keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="@string/app_name" />
<activity
android:name=".LoginActivity"
android:label="Foodie"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<category android:name="android.intent.category.LAUNCHER" />
<data android:scheme="@string/fb_login_protocol_scheme" />
</intent-filter>
</activity>
<activity android:name=".RegisterActivity" />
<!--
The API key for Google Maps-based APIs is defined as a string resource.
(See the file "res/values/google_maps_api.xml").
Note that the API key is linked to the encryption key used to sign the APK.
You need a different API key for each encryption key, including the release key that is used to
sign the APK for publishing.
You can define the keys for the debug and release targets in src/debug/ and src/release/.
-->
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="####" />
<activity
android:name=".MapActivity"
android:label="@string/title_activity_map" />
<activity
android:name=".MainActivity"
android:label="@string/title_activity_main"
android:theme="@style/AppTheme.NoActionBar" />
<activity android:name=".CategoryActivity" />
<activity android:name=".LocationActivity" />
<activity android:name=".TypeActivity" />
<activity android:name=".HourActivity" />
<activity android:name=".PriceActivity" />
<activity android:name=".OptionsActivity"/>
<activity android:name=".PhotoActivity"
android:theme="@style/AppTheme.NoActionBar"/>
<provider
android:name="android.support.v4.content.FileProvider"
android:authorities="${applicationId}.provider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/provider_paths"/>
</provider>
<provider android:authorities="com.facebook.app.FacebookContentProvider####"
android:name="com.facebook.FacebookContentProvider"
android:exported="true" />
</application>
答案 7 :(得分：1)
你可以使用继承
#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}
答案 8 :(得分：1)
如果我理解正确，最简单的方法就是让孩子们漂浮。例如：
#one { width: 500px; height: 1%; overflow: hidden; background: red; }
#two { float: left; width: 250px; height: 400px; background: aqua; }
#two { float: left; width: 250px; height: 200px; background: lime; }
在父元素上设置尺寸（高度/宽度）和溢出为自动或隐藏会导致它包含任何浮动的子元素。
注意溢出：隐藏;有时会导致内容被切断的问题，在这种情况下，您可能想尝试这种替代方法：
答案 9 :(得分：0)
如果您希望子div符合父级大小，则应在子div（child.margin >= child.bordersize）上设置至少为子边框大小的边距。
对于此示例，只需删除 #one 中的宽度：100％; 和高度：100％，然后删除宽度：#two 为100％。它应该是这样的：
html, body {width:100%; height:100%; margin:0; padding:0;}
.border {border:1px solid black;}
.margin {margin:5px;}
\#one {}
\#two {height:50px;}
\#three {width:100px; height:100%;}
答案 10 :(得分：0)
假设您可以在项目中使用flexbox，我想我可以解决您的问题。您要做的是使用 #one 将display: flex设置为Flexbox，然后使用 flex-direction: column 使其成为列对齐方式。
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.border {
border: 1px solid black;
}
.margin {
margin: 5px;
}
#one {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#two {
height: 50px;
}
#three {
width: 100px;
height: 100%;
}<html>
<head>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>