时间戳

首页 > 解决方案 > 添加布局后无法更改 div 高度

html - 添加布局后无法更改 div 高度

问题描述

我有一个剃须刀视图网页，其中包含div我以某种方式将数据填充到其中（延迟加载或循环无关紧要）。

如果我不使用布局，IE：

@{
    Layout = "_Layout";
}

然后div将使用我配置的高度，并在需要时显示滚动条（使用overflow: auto）

但是，当我添加布局时，即使是空的，我似乎也无法修改div's 的高度，这会导致它将所有屏幕从布局带到底部，并且不显示滚动。

是什么阻碍了我改变身高的能力？

（div加载数据的即时通讯是 div id container）

索引.cshtml：

@{
    Layout = "_Layout";
}

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        padding: 5px;
        text-align: center;
        width: 15%;
    }

    .Good {
        background-color: green
    }

    .Bad {
        background-color: red
    }

    #container {
        background: #eee;
    }
</style>

<head>
    <script src="/JQuery/jquery-3.3.1.min.js"></script>
</head>

<body style="overflow: hidden;">

    <div>
        <div>
            <h3 id="Progression"></h3>
        </div>
        <div id="container" style="width: 100%; height: 80%; overflow: auto;">

        </div>
        <div id="progress" style="display: none; height: 20%">
            <h4>Loading...</h4>
        </div>
    </div>
</body>

_Layout.cshtml：

<!DOCTYPE html>
<style>
    .main-header {
        background: url(/images/bg-header.png) transparent repeat-x 0 0;
    }
</style>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <header class="main-header" role="banner">
        <div>
            <a href="/" title="Home" rel="home">
                <img src="/images/COMPANY-logo.png" style="background-color:white;" alt="Home">
            </a>

        </div>
    </header>
<div>
    @RenderBody()
</div>
</body>
</html>

Empty _Layout.cshtml：（这个布局也有问题）

<!DOCTYPE html>
<style>
    .main-header {
        background: url(/images/bg-header.png) transparent repeat-x 0 0;
    }
</style>
<html>
<head>
</head>
<body>

<div>
    @RenderBody()
</div>
</body>
</html>

生成的页面（使用了空布局）：

<!DOCTYPE html>
<style>
    .main-header {
        background: url(/images/bg-header.png) transparent repeat-x 0 0;
    }
</style>
<html>
<head>
</head>
<body>

<div>

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        padding: 5px;
        text-align: center;
        width: 15%;
    }

    .Good {
        background-color: green
    }

    .Bad {
        background-color: red
    }

    #container {
        background: #eee;
    }
</style>

<head>
    <script src="/JQuery/jquery-3.3.1.min.js"></script>
</head>

<body style="overflow: hidden;">

    <div>
        <div>
            <h3 id="Progression"></h3>
        </div>
        <div id="container" style="width: 100%; height: 80%; overflow: auto;">

        </div>
        <div id="progress" style="display: none; height: 20%">
            <h4>Loading...</h4>
        </div>
    </div>
</body>

<script>
    var pageSize = 50;
    var pageIndex = 0;
    var totalItemsDisplayed = 0;

    $(document).ready(function() {
        lazyLoadCards(0);
        $('#container').scroll(function() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(this).prop('scrollHeight');
            var clientHeight = $(this).prop('clientHeight');

            if (scrollTop + clientHeight === scrollHeight) {
                pageIndex++;
                lazyLoadCards(pageIndex);
            }
        });

        function lazyLoadCards(index) {
            $.ajax({
                type: 'GET',
                url: '/AllCards/OnScrollEnd',
                data: { "startIndex": index, "size": pageSize },
                dataType: 'json',
                success: function(data) {
                    if (data != null) {
                        totalItemsDisplayed += data.length;
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2>" +
                                data[i].cardNumber +
                                "</h2>");
                        }

                        updateProgression();
                    }
                },
                beforeSend: function() {
                    $("#progress").show();
                },
                complete: function() {
                    $("#progress").hide();
                },
                error: function() {
                    alert("Error while retrieving data!");
                }
            });
        }

        function loadCards(index) {
            $.ajax({
                type: 'GET',
                url: '/AllCards/OnScrollEnd',
                data: { "startIndex": index, "size": pageSize },
                dataType: 'json',
                success: function(data) {
                    if (data != null) {
                        totalItemsDisplayed += data.length;
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2>" +
                                data[i].cardNumber +
                                "</h2>");
                        }
                        updateProgression();
                        if (data.length > 0) {
                            loadCards(index + 1);
                        }
                    }
                },
                beforeSend: function() {
                    $("#progress").show();
                },
                complete: function() {
                    $("#progress").hide();
                },
                error: function() {
                    alert("Error while retrieving data!");
                }
            });
        }

        function updateProgression() {
            $('#Progression').text("Displaying " +  totalItemsDisplayed + " Cards out of " +  6930);
        }
    });

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

可视化查看当前输出和所需结果：（ 请注意，灰色框中的文本只是带有一些文本的元素。这就是 ajax 调用的作用） 可视化查看当前输出

添加 @section 和 @style 并删除除 _Layout 之外的每个人后生成的代码

<!DOCTYPE html>
<html>
<head>
    <style>
        .main-header {
            background: url(/images/bg-header.png) transparent repeat-x 0 0;
        }
    </style>

    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 5px;
            text-align: center;
            width: 15%;
        }

        .Good {
            background-color: green
        }

        .Bad {
            background-color: red
        }

        #container {
            background: #eee;
        }
    </style>

</head>
<body>
<header class="main-header" role="banner">
    <div>
        <a href="/" title="Home" rel="home">
            <img src="/images/COMPANY-logo.png" style="background-color:white;" alt="Home">
        </a>
    </div>
</header>
<div>

<div>
    <div>
        <h3 id="Progression"></h3>
    </div>
    <div id="container" style="width: 100%; height: 80%; overflow: visible;">

    </div>
    <div id="progress" style="display: none; height: 20%">
        <h4>Loading...</h4>
    </div>
</div>




</div>

    <script src="/JQuery/jquery-3.3.1.min.js"></script>
    <script>
    var pageSize = 50;
    var pageIndex = 0;
    var totalItemsDisplayed = 0;

    $(document).ready(function() {
        lazyLoadCards(0);
        $('#container').scroll(function() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(this).prop('scrollHeight');
            var clientHeight = $(this).prop('clientHeight');

            if (scrollTop + clientHeight === scrollHeight) {
                pageIndex++;
                lazyLoadCards(pageIndex);
            }
        });

        function lazyLoadCards(index) {
            $.ajax({
                type: 'GET',
                url: '/AllCards/OnScrollEnd',
                data: { "startIndex": index, "size": pageSize },
                dataType: 'json',
                success: function(data) {
                    if (data != null) {
                        totalItemsDisplayed += data.length;
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2>" +
                                data[i].cardNumber +
                                "</h2>");
                        }

                        updateProgression();
                    }
                },
                beforeSend: function() {
                    $("#progress").show();
                },
                complete: function() {
                    $("#progress").hide();
                },
                error: function() {
                    alert("Error while retrieving data!");
                }
            });
        }

        function loadCards(index) {
            $.ajax({
                type: 'GET',
                url: '/AllCards/OnScrollEnd',
                data: { "startIndex": index, "size": pageSize },
                dataType: 'json',
                success: function(data) {
                    if (data != null) {
                        totalItemsDisplayed += data.length;
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2>" +
                                data[i].cardNumber +
                                "</h2>");
                        }
                        updateProgression();
                        if (data.length > 0) {
                            loadCards(index + 1);
                        }
                    }
                },
                beforeSend: function() {
                    $("#progress").show();
                },
                complete: function() {
                    $("#progress").hide();
                },
                error: function() {
                    alert("Error while retrieving data!");
                }
            });
        }

        function updateProgression() {
            $('#Progression').text("Displaying " +  totalItemsDisplayed + " Cards out of " +  6930);
        }
    });

    </script>

</body>
</html>

标签： htmlcssrazor

解决方案

您应该使用section。部分允许您在布局上添加样式、脚本等。除了布局页面，您不能在任何地方使用 head 和 body 标签。

空 _Layout.cshtml：

<!DOCTYPE html>
<head>
    <style>
        .main-header {
            background: url(/images/bg-header.png) transparent repeat-x 0 0;
        }
    </style>
    @RenderSection("Styles", required: false)
</head>
    <body>
        <div>
            @RenderBody()
        </div>
        @RenderSection("Scripts", required: false)
    </body>
</html>

索引.cshtml：

@{
    Layout = "_Layout";
}
@section Styles {
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        padding: 5px;
        text-align: center;
        width: 15%;
    }

    .Good {
        background-color: green
    }

    .Bad {
        background-color: red
    }

    #container {
        background: #eee;
    }
</style>
}

<div>
    <div>
        <h3 id="Progression"></h3>
    </div>
    <div id="container" style="width: 100%; height: 80%; overflow: auto;">

    </div>
    <div id="progress" style="display: none; height: 20%">
        <h4>Loading...</h4>
    </div>
</div>  
@section Scripts {
        <script src="/JQuery/jquery-3.3.1.min.js"></script>
}

更新

您需要进行以下更改：

<div id="container" style="width: 100%;height: 155px;overflow: scroll;display: block;">

除非您添加position:absolute;. 如果您只想要垂直滚动条，则需要使用overflow-y:scroll;。

推荐阅读