javascript - 当 div 溢出时向浏览器窗口添加滚动条

Question

在我说出我的问题之前，让我先说我是网络开发的初学者。我目前正在开发一个网页，它从数据库中获取元素，然后使用 JavaScript 动态显示它们。为此，我使用了 div。

我有一个主 div，其中包含其他几个较小的 div。它们以我想要的方式出现，当我调整窗口大小时问题开始:div 只是“溢出” - 它的某些部分不会出现在调整大小的浏览器中。也没有滚动条，所以我无法滚动到它们。

我尝试搜索网络(包括本网站)，但没有找到任何有用的信息 - 很可能是因为我没有使用正确的表达方式。

这是我的代码:

function TableDraw(){
    //I create the main div here:
    var maindiv = document.createElement('div');
    maindiv.style.position = "absolute";
    maindiv.style.marginLeft = "280px";
    maindiv.style.width = "auto";
    maindiv.style.top = "0px";
    maindiv.style.bottom ="0px";
    maindiv.style.overflow="auto";


    //A variable to help me position the rows of divs
    var rowcounter = 0;

    //Here, I create 3x5 divs; (currently) each one is the same size
    //If it's the 1st row (index 0), I append an image to them.
    //If it's the 2nd or the 3rd, I set their background color to red
    //for debugging (so I can see them).
    for (var k=0; k<3; k++){
        for (var i = 0; i < 5; i++){
            var newdiv = document.createElement('div');
            newdiv.style.position = "fixed";
            newdiv.style.marginLeft =((i)*120) +"px";
            newdiv.style.top = 10 + (rowcounter*125) + "px";
            newdiv.id = "div" + i;
            newdiv.style.height = "125px";
            newdiv.style.width = "100px";
            newdiv.style.border ="thin solid";


            if(k==0){
                var img = document.createElement('img');
                img.src = "/images/troops/" + (i+1) + ".png";
                img.style.width = "100px";
                img.style.height = "125px";
                newdiv.appendChild(img);
            } else {
                newdiv.style.backgroundColor = "red";
            }
            maindiv.appendChild(newdiv);
        }
        rowcounter++;
    }

    //This is almost the same as the previous, but it only has 4 columns.
    for (var k=0; k<3; k++){
        for (var i=0; i<4; i++){
            var newdiv = document.createElement('div');
            newdiv.style.position = "fixed";
            newdiv.style.marginLeft = ((i)*120) +"px";
            newdiv.style.top = 10 + (rowcounter*125) + "px";
            newdiv.id = "div" + i;
            newdiv.style.height = "125px";
            newdiv.style.width = "100px";
            newdiv.style.border ="thin solid";

            if(k==0){
                var img = document.createElement('img');
                img.src = "/images/troops/" + (i+6) + ".png";
                img.style.width = "100px";
                img.style.height = "125px";
                newdiv.appendChild(img);
            } else {
                newdiv.style.backgroundColor = "red";
            }
            maindiv.appendChild(newdiv);
        }
        rowcounter++;
    }
    document.body.appendChild(maindiv);
}

您还可以查看站点的当前状态:demo .

如果我不得不猜测，问题出在“绝对”和“固定”位置。

我已经尝试添加滚动条，但我最多只能在 div 中添加滚动条，而在窗口的一侧没有滚动条。获得这些的唯一方法是调整窗口大小，以便只有左侧的 3 个按钮(也是用 JS 创建的)可见，然后，栏出现。

有什么方法可以在窗口中添加栏，这样我就可以滚动到“溢出”的 div 部分吗？

提前感谢您的帮助!

(抱歉，如果我的代码很糟糕)

Answer 1

CSS 和计划存在一些基本问题，但我可以看到您的想法是正确的，但实现是错误的。相反，请考虑使用 float:left 来处理内联元素，或者使用 css 类来使用 display:inline 或类似方法来管理它。网上有很多解决方案来获得您想要的布局，但使用固定和绝对位置并不合适。