Question

我是css和html的新手，我想创建一个包含三个主要div的页面。一个在左边，一个在右边，一个主要内容在中心。

问题在于我能够生成这样的视图但是当我在主要内容div上取消隐藏某些div按钮时，单击中心div拉伸高度但是左边和右边没有。代码：

 @{Layout = null;}
    @model WebRole1.Models.RightsModel

    @{ViewBag.Title = "EditRights";}

<html style="background-color:#FFFFFF">
<head>
    <meta charset="utf-8" />


    <script>
        function myfunc() {

            document.getElementById('mydiv2').style.display = "block";
            document.getElementById('CustomRights').style.display = "block";
        }
        function hideview() {

            document.getElementById('mydiv2').style.display = "none";
            document.getElementById('CustomRights').style.display = "none";
        }
        function checkview(myID) {
            if (myID.checked == true) {
                view.checked = true;
            }

        }
        function checkAll(myID) {
            if (myID.checked == true) {
                var list = document.getElementsByClassName('checkbox');
                for (i = 0; i < list.length; i++) {
                    list[i].checked = true;
                    //document.getElementsByClassName('CheckBoxFor')[i].checked = true;
                }
            } else {
                var list = document.getElementsByClassName('checkbox');
                for (i = 0; i < list.length; i++) {
                    list[i].checked = true;
                }
            }
        }

    </script>
</head>
<div style="height: 100%; width: 10%; background-color: #519bbd; float: left; min-height:450px;overflow:auto">

</div>
<div id="mydiv" style="height: 100%; width: 10%; background-color: #519bbd; float: right; ">

</div>
<body>

    <header>

        <div class="title">
            <p class="site-title">@Html.ActionLink("Microsoft Rights Management", "Index", "Home")</p>
        </div>
    </header>


    <div style="width:100%;padding-left:3em">


        <h2 class="main-content" style="color:#757580">
            Assign rights to the User
        </h2>
    </div>
    <div style="background-color:#ffffff;padding-left:15em;" class="ui-tabs-nav">

        @using (Html.BeginForm("SaveTemplate", "Temp"))
        {

            @Html.ValidationSummary(true)
            <br />
            <fieldset style="font-size:16.7px;font-weight:600;color:#757580">
                <legend>TemplateModel</legend>
                <div>
                    @Html.RadioButtonFor(model => model.custom, "1", new { onclick = "hideview()", style = "width:10px;display:initial" })
                    VIEWER
                </div>
                <br />
                <div class="editor-field">
                    @Html.RadioButtonFor(model => model.custom, "2", new { onclick = "hideview()", style = "width:10px;display:initial" })
                    REVIEWER
                </div>
                <br />
                <div class="editor-field">
                    @Html.RadioButtonFor(model => model.custom, "3", new { onclick = "hideview()", style = "width:10px;display:initial" })
                    COAUTHOR
                </div>
                <br />
                <div class="editor-field">
                    @Html.RadioButtonFor(model => model.custom, "4", new { onclick = "hideview()", style = "width:10px;display:initial" })
                    COOWNER
                </div>
                <br />
                <div class="editor-field">
                    @Html.RadioButtonFor(model => model.custom, "0", new { onclick = "myfunc();", style = "width:10px;display:initial" })
                    CUSTOM
                </div>
                <br />
                <div id="CustomRights" style="font-size: 16.7px; font-weight: 600; color: #757580; display: none; ">
                    <h1 style="font-size:16.7px;font-weight:600;color:#757580">
                        Custom Rights

                    </h1>
                </div>
                <div id="mydiv2" style="font-size: 16.7px; font-weight: 600; color: #757580; display: none; border: thin; border-color: #757580">

                    <br />
                    @*@Html.CheckBoxFor(modelItem => modelItem.viewer,new { @onclick = "checkview();" })*@
                    <input data-val="true" data-val-required="The viewer field is required." id="view" name="view" value="true" type="checkbox" class="checkbox">  View Content

                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isSave, new { @onclick = "checkview(this);", @class = "checkbox" }) Save File
                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isEdit, new { @onclick = "checkview(this);", @class = "checkbox" }) Edit Content
                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isCopy, new { @onclick = "checkview(this);", @class = "checkbox" }) Copy and Extract Content
                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isViewAssigned, new { @onclick = "checkview(this);", @class = "checkbox" }) View Assigned Rights
                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isChange, new { @onclick = "checkview(this);", @class = "checkbox" }) Change Rights
                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isMacros, new { @onclick = "checkview(this);", @class = "checkbox" }) Allow Macros
                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isExport, new { @onclick = "checkview(this);", @class = "checkbox" }) Export Content(SaveAs)
                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isPrint, new { @onclick = "checkview(this);", @class = "checkbox" }) Print
                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isForward, new { @onclick = "checkview(this);", @class = "checkbox" }) Foward
                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isReply, new { @onclick = "checkview(this);", @class = "checkbox" }) Reply
                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isReplyAll, new { @onclick = "checkview(this);", @class = "checkbox" }) Reply All
                    <br />
                    <br />
                    @Html.CheckBoxFor(modelItem => modelItem.isFullControl, new { @onclick = "checkAll(this);" }) Full Control

                </div>

                <p>
                    <input type="submit" value="Save" />
                </p>

            </fieldset>
        }



    </div>
</body>
</html>

Answer 1

html,body { height: 100%; width:100%; margin: 0px; padding: 0px; }
.left_col, .right_col{ height:100%;}

Answer 2

您可以阅读有关如何GET YOUR DIVS TO BEHAVE LIKE TABLES

的文章

三列布局与隐藏的div

2 个答案: