如何使 <div> 响应另一个 <div>？
Posted
技术标签:
【中文标题】如何使 <div> 响应另一个 <div>？【英文标题】：How can I Make a <div> responsive to another <div>? 【发布时间】：2015-07-24 03:01:59 【问题描述】：我这里有两个divs，左边的部分是“Sumar”和“Alumno”，右边的部分是表格。
当表单内容存在验证问题时，会显示消息，使正确的div 调整大小以适应内容。左侧 div 未调整大小以匹配：
如何让左侧 div 始终调整大小以匹配右侧 div？
[更新]
查看：
@model Biblioteca.Models.SapDepoViewModel
@
ViewBag.Title = "SapDepo";
<body class="background-greenbkg">
<div class="container bold-titty" id="wite-color">
<div class="col-md-12">
<h2 class="cajita-titulo textofont"><i class="fa fa-bolt" style="color:yellow"></i> Sap | Depósito <i class="fa fa-money" style="color:green"></i> </h2>
</div>
<div class="hidden-xs hidden-sm col-md-1 col-md-push-4 margin-top-bot2 colorcajitaizqsap">
<div class="row height-sidetitle-sap padding-edit">
<i class="fa fa-dollar"></i>
<p id="fontiponki">Sumar</p>
<p id="minifont">Alumno</p>
</div>
</div>
@using (html.BeginForm("SapDepo", "Alumnos", FormMethod.Post))
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new @class = "text-danger")
@Html.HiddenFor(x => x.AlumnosId)
<div class=" hidden-xs hidden-sm col-md-push-4 col-md-4 cajita">
<section id="SapDepoAlumnos" >
<div class="form-group">
<div class="row">
<div class= "col-md-push-1 col-md-5">
@Html.LabelFor(x => x.Sap, htmlAttributes: new @class = "control-label col-md-2")
</div>
<div class="col-md-6">
@Html.EditorFor(x => x.Sap, new htmlAttributes = new @class = "form-control")
@Html.ValidationMessageFor(x => x.Sap, "", new @class = "text-danger")
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-push-1 col-md-5">
@Html.LabelFor(x => x.Deposito,"Depósito", htmlAttributes: new @class = "control-label col-md-2")
</div>
<div class="col-md-6">
@Html.EditorFor(x => x.Deposito, new htmlAttributes = new @class = "form-control")
@Html.ValidationMessageFor(x => x.Deposito, "", new @class = "text-danger")
</div>
</div>
</div>
</section>
<div class="form-group">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<input type="submit" value="Agregar" class="btn btn-success" style="border-radius: 4px; width: 100%" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<a href="/Alumnos/Index"> <input type="submit" value="Cancelar transacción" class="btn btn-danger" style="border-radius: 4px; width: 100%" /></a>
</div>
</div>
</div>
</div>
</div>
div 的 CSS：
//Right side
.margin-top-bot2
margin-top: 61px;
margin-bottom: 10px;
.colorcajitaizqsap
/*background-color: rgba(250, 255, 0,0.2);*/
background: repeating-linear-gradient(
45deg,
rgba(107, 153, 85, 0.65),
rgba(107, 153, 85, 0.65) 10px,
rgba(0, 54, 41, 0.65) 10px,
rgba(0, 54, 41, 0.65) 20px
);
border-radius: 10px 0 0 10px;
.height-sidetitle-sap
height: 225px;
.padding-edit
padding-left: 20px;
font-size: 60px;
//Left side
.cajita
padding-top: 30px;
color: #ffffff;
text-align: center;
background-color: rgba(0, 0, 0,0.3);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 0 10px 10px 0;
margin-top: 60px;
【问题讨论】：
你可以发布一个工作示例 我的服务器上没有，但我会发布代码 只需创建一个 jsfiddle (www.jsfiddle.net) 或等效项。 它不起作用，因为我使用的是剃须刀，jsfiddle 不接受它:(，但我发布了我的代码，我认为它也有效 您需要粘贴 html 输出，而不是您的 razor 标记，只需右键单击并在浏览器上查看源代码 【参考方案1】：Razor 不会妨碍您的布局，也不会使您无法修改您的布局。一个示例如下所示。
<!-- Front-End: -->
<div class="Container">
<div class="Column-Small">
<!-- Insert Additional Styling & Razor -->
</div>
<div class="Column-Large">
<!-- Insert Additional Styling & Razor -->
</div>
</div>
所以你的 Razor 语法会在里面，有额外的结构。这将迎合您的模型，这将被显示。然后您的样式表将具有响应式布局，例如：
.Container
width: 90%;
margin: 0 auto;
clear: both;
.Column-Small
width: 10%;
.Column-Large
width: 80%;
[class*="Column-"]
height: 10rem;
border: 1px solid #000;
float: left;
请记住，这个例子很简单，只是一个例子。目标是确保容器元素内的最大高度，如果没有额外的标记，我们将无法提供帮助。
希望这对您有所帮助，请记住 Razor 不应更改您的布局，而是将您的数据放入布局中。
【讨论】：
【参考方案2】：您预先定义了左列的高度，而不是让它自动调整大小。注意div继承自.height-sidetitle-sap，定义为：
.height-sidetitle-sap
height: 225px;
删除它，然后通过填充或边距固定内部内容的高度和位置，它应该适当地调整大小。
【讨论】：
mmm 继承它的代码是什么？像身高这样的东西：继承； ?? 检查this。真的，您要做的是让 div 一直延伸到底部，减去一些边距或填充。你想让它填满它给定的任何空间，然后父级只是告诉它它有多少空间，它会正确填写。以上是关于如何使 <div> 响应另一个 <div>？的主要内容，如果未能解决你的问题，请参考以下文章