显示边框溢出和可折叠，直到单击隐藏

Question

我有 3 个彼此相关的问题：

1. 边框的背景颜色溢出到第二个边框，如何让第一个和第二个边框之间的空间变白。
2. 当我最小化页面时，背景颜色不会扩展以覆盖所有文本框和与边框相同的东西，我如何使边框和背景颜色在最小化后覆盖所有内容。我试过溢出：隐藏和滚动。滚动做我想要的，但滚动条应该由浏览器而不是在边框类内。
3. 如何将折叠设置为在单击之前显示，然后它变为隐藏而不是在单击之前隐藏。 我很感激任何帮助。你可以运行代码来看看我的意思。

.wrapper {
  margin: 0 auto;
  width: 100%;
}

/* Change 960 to desired width */
.border {
  border-style: double;
  border-width: 10px;
  background-color: silver;
  overflow: expand;
}

.collapsible {
  background-color: sliver;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: lightgray;
}

.collapsible:after {
  content: "\002B";
  background-color: sliver;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  background-color: sliver;
  padding: 0 18px;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap  /3.4.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="border">
    <button class="collapsible" data-toggle="collapse" data-target="#demo">
      Simple collapsible
    </button>
    <div id="demo" class="collapse">
      <div class="row" style="white-space:nowrap;">
        <br />
        <label style="margin-right:78px; margin-left:15px">Assign Date</label>
        <label style="margin-right:78px;">Task Subject</label>
        <label style="margin-right:78px;">Assigner</label>
        <label style="margin-right:78px;">Pirorty</label>
        <label style="margin-right:78px;">Status</label>
        <label style="margin-right:78px;">Category</label>
        <label style="margin-right:78px;">Due Date</label>
        <label style="margin-right:78px;">Complete</label>
      </div>
      <div class="row" style="white-space:nowrap;">
        <input
          type="text"
          name="AssignDate"
          style="width:80px; margin-right:78px; margin-left:15px"
        />

        <input
          type="text"
          name="TaskSubject"
          style="margin-right:78px; width:85px"
        />
        <input
          type="text"
          name="Assigner"
          style="margin-right:50px; width:85px"
        />

        <select name="Pirorty" style="width: 60px; margin-right:70px">
          <option>High </option>
          <option>Low</option>
          <option>Normal</option>
        </select>

        <select name="Status" style="width: 100px; margin-right:20px">
          <option>I</option>
          <option>N</option>
          <option>R</option>
          <option>Re</option>
          <option>Cancelled</option>
          <option>Closed</option>
        </select>

        <select name="Category" style="width: 100px; margin-right:40px">
          <option>A</option>
          <option>D</option>
          <option>E</option>
          <option>INFO</option>
          <option>I</option>
          <option>M</option>
          <option>N</option>
          <option>R</option>
          <option>S</option>
        </select>

        <input
          type="date"
          name="DueDate"
          style="width: 80px; margin-right:60px"
        />

        <select name="Category" style="width: 50px">
          <option>10</option>
          <option>20</option>
          <option>30</option>
          <option>40</option>
          <option>50</option>
          <option>60</option>
          <option>70</option>
          <option>80</option>
          <option>90</option>
          <option>100</option>
        </select>

        <br />
        <br />
        <input
          type="checkbox"
          name="IncludeTasksIWasCcedOn"
          style="margin-left:15px"
        />&nbsp;Include Tasks I was CC'd On&nbsp;
        <button type="submit" style="float :right; margin-right:15px">
          Filter
        </button>
        <button type="reset" style="float :right; margin-right:15px">
          Clear
        </button>
        <br />
        <br />
        <br />
      </div>
    </div>
  </div>
</div>

Answer 1

jsfiddle of collapse

4) sliver 不是 css 的有效颜色。

3) 您需要将“in”类添加到元素#demo 以使其开始扩展

2) 你需要添加

#demo {
    overflow: hidden;
}

到您的样式区域。这将隐藏任何在小于其子项时会溢出元素高度的子项

1) bg 颜色介于两者之间的原因是因为您设置了父元素的背景颜色。除非被覆盖，否则它的背景颜色将流入子级。 我将父背景设置为白色，子背景颜色设置为银色。

<!DOCTYPE html>
<html>

<head>
<meta
    name="viewport"
    content="width=device-width, initial-scale=1"
>
<link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> 
 </script>
     <style>
        .wrapper {
        margin: 0 auto;
        width: 100%;
        }

    /* Change 960 to desired width */
    .border {
        border-style: double;
        border-width: 10px;
        /* changed bg color */
        background-color: white;
        /* expand is not a valid value
        overflow: expand; */

    }

    .collapsible {
        /* sliver is not a valid color */
        background-color: sliver;
        color: black;
        cursor: pointer;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
    }

    .active,
    .collapsible:hover {
        background-color: lightgray;
    }

    .collapsible:after {
        content: '\002B';
        background-color: sliver;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    .active:after {
        content: "\2212";
    }

    .content {
        background-color: sliver;
        padding: 0 18px;
        max-height: 0;
        transition: max-height 0.2s ease-out;
    }

    #demo {
        overflow: hidden;
    }

    /* added bg color here for inner area */
    #demo .row {
        background-color: silver;
    }
    </style>
    </head>

    <body>

<div class="container">
    <div class="border">
        <button
            class="collapsible"
            data-toggle="collapse"
            data-target="#demo"
        >Simple collapsible</button>
        <div
            id="demo"
            class="collapse in"
        >
            <div style="clear:both;">
                <div
                    class="row"
                    style="white-space:nowrap;"
                >
                    <br />
                    <label style="margin-right:78px; margin-left:15px">Assign Date</label>
                    <label style="margin-right:78px;">Task Subject</label>
                    <label style="margin-right:78px;">Assigner</label>
                    <label style="margin-right:78px;">Pirorty</label>
                    <label style="margin-right:78px;">Status</label>
                    <label style="margin-right:78px;">Category</label>
                    <label style="margin-right:78px;">Due Date</label>
                    <label style="margin-right:78px;">Complete</label>
                </div>
                <div
                    class="row"
                    style="white-space:nowrap;"
                >
                    <input
                        type="text"
                        name="AssignDate"
                        style="width:80px; margin-right:78px; margin-left:15px"
                    />

                    <input
                        type="text"
                        name="TaskSubject"
                        style="margin-right:78px; width:85px"
                    />
                    <input
                        type="text"
                        name="Assigner"
                        style="margin-right:50px; width:85px"
                    />

                    <select
                        name="Pirorty"
                        style="width: 60px; margin-right:70px"
                    >
                        <option>High </option>
                        <option>Low</option>
                        <option>Normal</option>
                    </select>

                    <select
                        name="Status"
                        style="width: 100px; margin-right:20px"
                    >
                        <option>I</option>
                        <option>N</option>
                        <option>R</option>
                        <option>Re</option>
                        <option>Cancelled</option>
                        <option>Closed</option>
                    </select>

                    <select
                        name="Category"
                        style="width: 100px; margin-right:40px"
                    >
                        <option>A</option>
                        <option>D</option>
                        <option>E</option>
                        <option>INFO</option>
                        <option>I</option>
                        <option>M</option>
                        <option>N</option>
                        <option>R</option>
                        <option>S</option>
                    </select>

                    <input
                        type="date"
                        name="DueDate"
                        style="width: 80px; margin-right:60px"
                    />

                    <select
                        name="Category"
                        style="width: 50px"
                    >
                        <option>10</option>
                        <option>20</option>
                        <option>30</option>
                        <option>40</option>
                        <option>50</option>
                        <option>60</option>
                        <option>70</option>
                        <option>80</option>
                        <option>90</option>
                        <option>100</option>
                    </select>

                    <br />
                    <br />
                    <input
                        type="checkbox"
                        name="IncludeTasksIWasCcedOn"
                        style="margin-left:15px"
                    >&nbsp;Include Tasks I was CC'd On&nbsp;
                    <button
                        type="submit"
                        style="float :right; margin-right:15px"
                    >Filter</button>
                    <button
                        type="reset"
                        style="float :right; margin-right:15px"
                    >Clear</button>
                    <br />
                    <br />
                    <br />
                </div>
            </div>
        </div>
    </div>
</body>

</html>