我正在向一个div容器动态添加新的div，我面临的问题是div可能只是太大了几个像素，因此产生了一个几乎无用的滚动条，但是使用overflow:hidden；时，div会被剪掉一点。我希望使div的高度稍微大一点，应用height:100%；没有工作。这就是我创建div的方式

function layerCreatorX(submission) { // creator for normal layers
    let unique_id = uuidv4() // created unique IDs
    let wrapDiv = document.createElement("div")
    wrapDiv.id = "wrapDiv" + unique_id

    let activeLayerIcon = document.createElement("IMG")
    activeLayerIcon.setAttribute("class", "activeLayerOff")
    activeLayerIcon.setAttribute("name", "activeLayerIcon")

    let invisibilityIcon = document.createElement("IMG")
    invisibilityIcon.setAttribute("class", "visibilityButtonPos invisibilityButton") // filter for grey
    invisibilityIcon.setAttribute("name", "invisibilityIcon")

    let visibilityIcon = document.createElement("IMG") 
    visibilityIcon.setAttribute("class", "visibilityButtonPos visibilityButtonOff")
    visibilityIcon.setAttribute("name", "visibilityIcon")

    let line = document.createElement("hr")
    line.setAttribute("style", "margin-top: 0px;")
    line.className = "greyLine" //grey line will go underneath the div

    let x = document.createElement("span")
    let t = document.createTextNode(submission)

    layerArray.push(unique_id)
    layerNamesForComparison.push(submission) //new name comparator
    x.className = "item item-layer"
    x.id = unique_id
    t.className = "noselect"

    x.appendChild(activeLayerIcon)
    x.appendChild(t)
    x.appendChild(invisibilityIcon)
    x.appendChild(visibilityIcon)
    wrapDiv.appendChild(x)
    wrapDiv.className = "LayerListDiv"

    document.querySelector('.LayerList').appendChild(wrapDiv)
    document.querySelector('.LayerList').appendChild(line)
}

这就是我创造它们时的样子:

我想去掉右侧的垂直滚动条，但仍然能够查看整个div，如果我使用溢出隐藏，从底部开始的

。layerlist CSS:

.LayerList {
        user-select: none;
        overflow: auto;
        right: -15px;
        width: 100%;
        max-height: calc(93% - 60px); /*This height has to stay*/
    }

编辑:已添加代码段

null

//modals
    let modal = document.getElementById("myModal")
    let btn = document.getElementById("btnCreate")
    let span = document.getElementsByClassName("close")[0]
    const div = document.getElementById('layerList')

    //layer variables
    let layerName
    let layerId
    let layerVisible
    let layerLock
    let layerNote
    let layerActive

    let layerJSObject = []

    //other vars
    let files //stores json file
    let data //stores json file data
    let layerArray = [] //stores all layer id's in array for comparison purposes
    let layerNamesForComparison = [] //stores names of layers, so that duplicates are not created

    //miro vars
    let widgetName
    let selectedWidgets = []// listener var to store all widget info in
    let selectedWidgetIDs = []
    // will store id's of widgets currently selected until they are saved into a layer

    let superObjectID

    //DB vras
    let globalToken
    let responseToken
    let boardId
    let availableBoards
    let recordId

    //timestamp
    let timeStamp
    let account 
    let availableResults
    let onlineMode
    let activeLayer = 0
    let activeLayerState
    
    //widgetDisplayer()

    //CSS vars
    let xDiv

    let DeleteLayerButton = document.getElementById("btnDelete").disabled = true
    let AddObjectsButton = document.getElementById("btnMove").disabled = true
    let RemoveObjectsButton = document.getElementById("btnRemove").disabled = true
//------------------------------------------------------ Modal handling ---------------------------------------------------------
    
    // When the user clicks the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block"
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none"
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none"
        }
    }

    function success() {
        if(document.getElementById("newLayerName").value === "") { 
            document.getElementById('submitNewLayer').disabled = true; 
        } 
        else { 
            document.getElementById('submitNewLayer').disabled = false;
        }
    }
//--------------------------------------------------Layer naming/validating/creating/deleting/etc... functions--------------------

    function validateNewLayerName() { // validates for empty input from input field
        let input = document.forms["newLayerForm"]["newLayerName"].value
        let lengthLayers = layerArray.length

        for(i = 0; i < lengthLayers; i++){ //checks if input is already used as layer name
            if(input == layerNamesForComparison[i]){ //fixed?
                alert("This layer name is already used, please either delete it or use a different name")
                return false
            }
            else{
                continue
            }
        }
        
        if (input == "" || input == null || input == 0 || input == "0") { // check if submitted input is empty or 0
            alert("Cannot submit empty field, please try again!")
            return false
        }

        else {
            //if everything adds up appends layer list with new layer
            layerCreatorX(input)
            modal.style.display = "none"
        }
        return false 
    }

    function uuidv4() { //random uuidv4 generator for layer id
        return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
            (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
        )
    }

function layerCreatorX(submission) { // creator for normal layers
    let unique_id = uuidv4() // created unique IDs
    let wrapDiv = document.createElement("div")
    wrapDiv.id = "wrapDiv" + unique_id

    let activeLayerIcon = document.createElement("IMG")
    activeLayerIcon.setAttribute("class", "activeLayerOff")
    activeLayerIcon.setAttribute("name", "activeLayerIcon")

    let invisibilityIcon = document.createElement("IMG")
    invisibilityIcon.setAttribute("class", "visibilityButtonPos invisibilityButton") // filter for grey
    invisibilityIcon.setAttribute("name", "invisibilityIcon")

    let visibilityIcon = document.createElement("IMG") 
    visibilityIcon.setAttribute("class", "visibilityButtonPos visibilityButtonOff")
    visibilityIcon.setAttribute("name", "visibilityIcon")

    let line = document.createElement("hr")
    line.setAttribute("style", "margin-top: 0px;")
    line.className = "greyLine" //grey line will go underneath the div

    let x = document.createElement("span")
    let t = document.createTextNode(submission)

    layerArray.push(unique_id)
    layerNamesForComparison.push(submission) //new name comparator
    x.className = "item item-layer"
    x.id = unique_id
    t.className = "noselect"

    x.appendChild(activeLayerIcon)
    x.appendChild(t)
    x.appendChild(invisibilityIcon)
    x.appendChild(visibilityIcon)
    wrapDiv.appendChild(x)
    wrapDiv.className = "LayerListDiv"

    document.querySelector('.LayerList').appendChild(wrapDiv)
    document.querySelector('.LayerList').appendChild(line)
}

 html, body {
            height: 91.5%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .scrollable-container {
            height: 100%;
            overflow-y: auto;
        }
        .scrollable-content {
            height: 100%;
            overflow-y: auto;
            background-color: #2a79ff;
        }

        .rtb-sidebar-caption {
            font-size: 14px;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.8);
            padding: 24px 0 0 24px;
            margin-bottom: 20px;
        }

        .miro-btn, button {
            width: 120px;
            margin: 3px 0 0 14px;
            padding: 5px;
        }

        .delete-btn {
            width: 120px;
            margin: 3px 0 0 14px;
            padding: 5px;
            background-color: rgb(216, 24, 24);
        }

        .item {
            align-items: center;
            height: 48px;
            line-height: 48px;
            cursor: pointer;
            padding-left: 24px;
            padding-top: 1px;
            padding-bottom: 1px;
            font-size: 20px;
            
        }
        
        /* css for modal popup */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            text-align: center;
        }

        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 15px;
            border: 1px solid #888;
            width: auto;
            display: inline-block;
            border-radius: 8px;
        }

        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: rgb(23, 9, 75);
            text-decoration: none;
            cursor: pointer;
        }

        input[type=text] {
            width: 230px;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border-radius: 4px;
        }

        .LayerList {
            user-select: none;
            overflow: auto;
            right: -15px;
            width: 100%;
            max-height: calc(93% - 60px); /*Has to be 95 so that the last element of span is visible unlike at 100%*/
        }

        .LayerListDiv {
            height: 100%;
        }

        .LayerList > .items-container {
            border-top: 1px solid #e7e7e7;
        }

        span:last-child { 
            height: 100%; 
        }

        .LayerList span {
            user-select: inherit;
        }

        .labelWrap {
            margin: 0px;
            display: flex;
            padding: 0;
        }

        .btn {
            background-color: white; 
            border: none; /* Remove borders */
            padding: 12px 16px; 
            cursor: pointer; 
        }

        .btn:hover {
            background-color: grey;
        }

        .wrapLabel {
            padding: 0;
        }

        hr.greyLine {
            border-top: 1px solid #C3C2CF;
            opacity: 1;
            margin: 20px;
            padding: 0;
            margin-bottom: -3px;
        }

        .activeLayerOn {
            float: left; 
            margin-left: 20px; 
            margin-top: 12px; 
            position: relative; 
            margin-right: 15px; 
            background: url(icons/edit-2-on-2.svg);
            height: 0;
            width: 0;
            padding: 12px 12px 12px 12px;
            border-style: 0;
        }

        .activeLayerOff {
            float: left; 
            margin-left: 20px; 
            margin-top: 12px; 
            position: relative; 
            margin-right: 15px; 
            background: url(icons/edit-2.svg);
            height: 0;
            width: 0;
            padding: 12px 12px 12px 12px;
        }

        .visibilityButtonPos {
            float: right; 
            margin-left: 15px; 
            margin-top: 12px; 
            position: relative; 
            margin-right: 15px; 
            height: 0;
            width: 0;
            padding: 12px 12px 12px 12px;
        }

        .visibilityButton {
            background: url(icons/eye-off.svg);
        }

        .invisibilityButton {
            background: url(icons/eye.svg);
        }

        .visibilityButtonOff {
            display: none;
        }

        .activeDiv {
            background: #EBEAEF;
            color: #4568FB;
        }

        .noselect {
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Safari */
            -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
        }

        .whiteIcon {
            filter: invert(98%) sepia(5%) saturate(8%) hue-rotate(101deg) brightness(102%) contrast(101%);
        }

        .lefticon {
            user-select: none;
            width: 150px; 
            height: 75px; 
            position: absolute; 
            position: absolute; 
            bottom: 20px; 
            left: 0;
        }

        .rightIcon {
            user-select: none;
            width: 150px; 
            height: 75px; 
            position: absolute; 
            position: absolute; 
            bottom: 20px; 
            left: 160px;
        }

        .topIcons {
            display: inline-block; 
            vertical-align: middle;
            height: 24px; 
            width: 24px;
        }

        .addButton {
            user-select: none;
            width: 150px; 
            vertical-align: middle; 
            padding: 0;
        }

        .deleteButton {
            user-select: none;
            width: 150px; 
            padding: 0;
        }

<link rel="stylesheet" href="https://miro.com/app/static/styles.1.0.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://miro.com/app/static/sdk.1.1.js"></script>

<div class="miro-h1" style= "padding-left: 20px; padding-top: 15px; user-select: none;">Layers</div>


<form>

    <button id="btnCreate" type="button" title="Create Layer" class="miro-btn miro-btn--secondary miro-btn--medium addButton">
        <img src="icons/plus.svg" class="topIcons">
        Add new Layer
    </button>

    <button onclick="deleteLayerById(activeLayer)" id="btnDelete" type="button" title="delete a layer" class="miro-btn miro-btn--secondary miro-btn--medium deleteButton">
        <img src="icons/trash-2.svg" class="topIcons">
        Delete Layer</button>
    
    <hr class="greyLine">
</form>

<div class="container"></div>
<!------------------------------------------------------------- Modal Create------------------------------------------------------------------->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <form name="newLayerForm" onsubmit="return validateNewLayerName()" method="post" required>
            <span class="close">&times;</span>
            <p class="miro-h3" style="text-align: left;">Create Layer </p>
            <input placeholder="Layer Name" type="text" name="newLayerName" id="newLayerName" onkeyup="success()" class="miro-input" style="width: 300px;">
            <br>
            <button type="submit" value="submit" id="submitNewLayer" class="miro-btn miro-btn--primary miro-btn--medium" style="float: right;" disabled>Create Layer</button>
        </form>
    </div>
</div>
<!----------------------------------------------------------------End of modal ------------------------------------------------------------------>
<div id="layerList" class="LayerList" style="font-size: 0px;">
    
</div>
<form>
    <button onclick="getSelectedWidgets()" id="btnMove" type="button" class="miro-btn miro-btn--primary miro-btn--medium lefticon" >
    <img src="icons/arrow-left.svg" class="whiteIcon" alt="arrow-left"> <br> Add selected <br>objects to layer</button>

    <button onclick="removeSelectedWidgetsFromLayer()" id="btnRemove" type="button" class="miro-btn miro-btn--secondary miro-btn--medium rightIcon" >
    <img src="icons/arrow-right.svg" alt="arrow-right"> <br> Remove selected <br>objects from layer</button>
</form>

null