Html Question posted in
Some basic documentation can be found here.

Html – Why don't scrollview work in div when body scrollview is disabled?

I have this code that pulls text from text file and displays it in pre-code block, the problem is that I’m only able to scroll the entire page (with body overflow enabled) but I can’t scroll div itself, even if I force display of scrollbar it stays unactive. What is my mistake here?

<body style="overflow:hidden">
    <div style="margin: 0;padding: 0; height:100%; width: 100%; border: none; overflow: auto;">
    <pre style="margin: 0;padding: 0;  border: none; overflow: auto;">
    <code> <?php echo $content?> </code>
    </pre>
    </div>
</body>

I’ve tried changing width/height to all available values, and overflow settings too.

Tags:

2

Answers


  1. 0

    You need to give the div or pre a specific "height" so that it can be scrolled

    like:

    <div style="margin: 0;padding: 0; height:100%; width: 100%; border: none; overflow: auto;">
    <pre style="margin: 0;padding: 0; height:150px; border: none; overflow: auto;">
        <code> <?php echo $content?> </code>
    </pre>
</div>
    Login or Signup to reply.
  2. 0

    You need a height that’s different from your current 100%. For example height: 100vh. This will make sure that the size of the container equals to the size of the view-port in height and then you will have a scroll for it.

    .my-code {
    height: 100vh;
}
    <body style="overflow:hidden">
    <div class="my-code" style="margin: 0;padding: 0; width: 100%; border: none; overflow: auto;">
    <pre style="margin: 0;padding: 0;  border: none; overflow: auto;">
    <code>

function solveNQueen(n) {
    let result = [];
    dfs(new Array(n), 0, result);
    return result;
}

function dfs(queens, row, result) {
    let n = queens.length;
    
    if (row === n) {
        result.push(buildResult(queens));
        return;
    }
    
    for (let i = 0; i < n; i++) {
        if (isValid(queens, row, i)) {
            queens[row] = i;
            dfs(queens, row + 1, result);
            queens[row] = null;
        }
    }
}

function isValid(queens, row, col) {
    for (let i = 0; i < row; i++) {
        if (queens[i] === col || queens[i] - i === col - row || queens[i] + i === col + row) {
            return false;
        }
    }
    return true;
}

function buildResult(queens) {
    let result = [];
    let n = queens.length;
    
    for (let i = 0; i < n; i++) {
        let str = '';
        for (let j = 0; j < n; j++) {
            if (queens[i] === j) {
                str += 'Q ';
            } else {
                str += '. ';
            }
        }
        result.push(str);
    }
    return result;
}    
    </code>
    </pre>
    </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search