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或类似方法来管理它。获得所需的布局有很多在线解决方案，但使用固定和绝对位置并不是正确的。

Answer 2

绝对或固定定位的div不会影响父元素的高度（在你的情况下，我认为这是body元素）。尝试使用相对定位和浮动规则。您可能还想谷歌＆＃34; clearfix＆＃34;强制包含浮动元素的div的高度。不是最好的解决方案，但另一种选择是根据其内容计算body / contains元素的高度，并使用JS设置它。

当div溢出时，将滚动条添加到浏览器窗口

2 个答案: