Question

我正在尝试制作一个有两列的方框。左列应具有标题和可滚动内容。当我向左列添加标题时，它会向下推送下一个元素。我怎样才能让它与容器齐平？

查看我制作的JSFIDDLE，因为很容易看到问题。

CSS

html, body{
    height: 100%;
}
#container{
    width:100%;
    background-color: blue;
    height: 400px;
    padding: 5px;
}
#col1{
    width: 33.33%;
    height: 100%;
    background-color: red;
   float:left;
}
#col2{
    float:left;
    width: 66.66%;
    background-color: yellow;
    height:100%;
}
#scrollplease{
    overflow-y: scroll;
    height: 100%;
}

Answer 1

我认为问题可能出在#scrollplease的高度上。尝试玩高度。 80％似乎是开始演示的好地方。

#scrollplease{
    overflow-y: scroll;
    height: 80%;
}

您可能还想使用h2和ul元素上的填充/边距来排列所有内容。

Answer 2

用户样式表或浏览器正在为你的h2和ul添加保证金。你应该至少使用有限的css重置。

您还需要使用列的高度和宽度来对抗容器上的填充

我会做这样的事情：

h2 {
margin: 0;
}
ul {
margin: 0;
}
#container{
  width:100%;
  border: 5px solid blue;
  height: 400px;
}
#col1{
  width: 33%;
  padding: 10px 0 10px 1%;
  height: 380px;
  background-color: red;
  float:left;
}
.header{
  height: 15%;
}
#scrollplease{
  overflow-y: scroll;
  height: 85%;
}
#col2{
  float:left;
  padding: 10px 0 10px 1%;
  height: 380px;
  width: 65%;
  background-color: yellow;
}

请参阅此JS Fiddle

Answer 3

框高度设置为400px，滚动包装器的高度设置为100％（变为400px）。即使滚动框上方有一个标题，占据大约75px，滚动包装的高度仍保持在400px，但从较低的位置开始，因此延伸到包装的范围之外。

Answer 4

要避免列表溢出容器，您需要做的就是在容器类上设置overflow:hidden。

$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");
$(".row-list").append("<p>World</p>");

.container
{
  height:20em;
  width:20em;
  overflow:hidden;
}

.col
{
  height:100%;
  float:left;
}

.row
{
  height:3em;
  clear:both;
  overflow:hidden;
}

.row-list
{
  clear:both;
  height:calc(100% - 3em);
  overflow-y:auto;
}

.green
{
  background:green;
}

.blue
{
  background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="col green">
		<div class="row">
			<h1>Hello</h1>
		</div>
		<div class="row-list">
			
		</div>
	</div>
	<div class="col blue">
		<div class="row">
			<h1>Hello</h1>
		</div>
		<div class="row">
			<p>World</p>
		</div>
	</div>
</div>

Answer 5

＆＃13;

#!/bin/bash

read -ra flds <<< '|| x ||| + ||'

# for each substring in string
for c in "${flds[@]}"
    do
        # compute string length
        len=${#c}
        # if the first char in c is a | then the corresponding length is the number, append it to a string
        if [[ "${c:0:1}" == "|" ]]; then str=$str"$len"
        # check for + and * and append them to the string
        elif [ "${c:0:1}" == "+" ]; then str=$str"+"
        elif [ "${c:0:1}" == "x" ]; then str=$str"*" 
        fi
    done
#evaluate the string via bc
echo "$str"|bc

＆＃13;

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}


.Main {
  height: 100%;
  display: flex;
}


.Aside {
  width: 200px; /* Any size */
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  background: #02c39a; /* For demo */
}

.Aside__header {
  height: 120px; /* Any size */
  background: rgba(0,0,0,.2); /* For demo */
  overflow-y: hidden;
}

.Aside__content {
  flex: 1;
  background: rgba(255,255,255,.2); /* For demo */
  overflow-y: auto;
}


.Section {
  flex: 1;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  background: #f0f3bd; /* For demo */
}

.Section__header {
  height: 120px; /* Any size */
  background: rgba(0,0,0,.2);
  overflow-y: hidden;
}

.Section__content {
  flex: 1;
  background: rgba(255,255,255,.2); /* For demo */
  overflow-y: auto;
}

＆＃13;

DIV溢出外部容器上的可滚动Y轴

5 个答案: