Question

Trying to make 3 div that scroll left and right inside a other div in overflow. And I did this:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script src="jquery-2.1.4.js"></script>
    <script src="javascript/script.js"></script>
    <script src="jquery.lazyload.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>

    <style>
    .container {
        position: absolute;
        top: 0px;
        left: 0px;
        margin-right: -300px;
    }
    .content-container {
        top: 150px;
        position: absolute;
        background-color: white;
        overflow: auto;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        width: 1340px;
    }
    </style>
</head>

<body>
    <div class="content-container" id="content-container-id">
        <div class="container" id="container-search"></div>
        <div class="container" id="container-sim"></div>
        <div class="container" id="container-forum"></div>

        <script>
        $("#content-container-id")
            .css("height", ($(window).height() - 150) + "px");

        $("#content-container-id")
            .css("width", $(window).width());

        $("#container-search")
            .css("width", $(window).width());

        $("#container-search")
            .css("height", ($(window).height() - 170) + "px");

        $("#container-search")
            .css('left', $(window).width());

        $("#container-sim")
            .css("width", $(window).width());

        $("#container-sim")
            .css("height", ($(window).height() - 170) + "px");

        $('#container-forum')
             .css('left', windowWidth * 2 + "px");

        $("#container-forum")
             .css("width", $(window).width());

        $("#container-forum")
             .css("height", ($(window).height() - 170) + "px");

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

All of the #container-search, #container-sim, #container-forum, don't use all the window space and just a bit, what am I doing wrong?

Answer 1

在这一行：

$('#container-forum').css('left', windowWidth * 2 + "px");

windowWidth不是声明的变量。您需要将其更改为：

$('#container-forum').css('left', $(window).width() * 2 + "px");

所有3个div现在都显示在#content-container-id中。以下是示例：https://jsfiddle.net/fyb5zxto/

我已经对div进行着色，以便更容易看到发生了什么。您可以删除此着色。我还添加了#content-container-id

的缺失结束div

jquery, can't change a div width to the window width

1 个答案:

jquery, can&#39;t change a div width to the window width

1 个答案:

jquery, can't change a div width to the window width