相关疑难解决方法(0)

我有两个DIV,.sidebar并且.content我想设置.sidebar为与.content保持相同的高度.

我尝试过以下方法:

$(".sidebar").css({'height':($(".content").height()+'px'});

$(".sidebar").height($(".content").height());

var highestCol = Math.max($('.sidebar').height(),$('.content').height());
$('.sidebar').height(highestCol);

这些都不起作用.因为.content我没有任何高度,因为会根据内容增加或减少.

请帮我.我今天必须完成一个网页,这个(简单)的事情令我头疼.

谢谢!

我有一个部分,在两个部分内.这些小节中的任何一个都可以确定另一个小节的大小.

我在这里编写了一个快速的代码:http://codepen.io/anon/pen/QyZbev

.outersection {
  width: 100%;
  overflow: scroll;
  height: 100vh;
}

.group-section {
  display: block;
  border: blue 1px solid;
  padding: 5px 0;
  height: 100%;
}

.code, .documentation {
  width: 50%;
  display: inline-block;
  border: 1px solid green;
  height: 100%;
  overflow: auto;
}

我只用JQuery和CSS试过这个,但是这些部分中有两个以上,每个都需要不同的高度.这两种尝试都没有用,我不相信JQuery方式对于所有部分都是动态的.

问题是双方都没有达到匹配的高度,然后双方似乎到处漂浮.它们没有填充封装部分,而div似乎会切换它们浮动的边.

提前致谢!

我带来了一个css高度的戏剧.

我想制作一个布局,一个包含2个div的div在同一行,一个是可调整大小的,另一个必须适合父级的高度(与第一个相同的高度).

第一个div可以有额外的信息(所以我无法修复高度),所以它会有更多的线,重要的是它不能有滚动条.第二个div必须服从第一个高度,如果它大于它将有一个滚动条.

<div class='container'> <!-- parent -->
    <div class='left'> <!-- resizable -->
    </div>
    <div class='right'> <!-- same height as left div  -->
    </div>
</div>

未解决的代码

问题是我无法弄清楚如何使用css.或者甚至可以用css.我不想用js.

有人请帮帮我!

我正在尝试使用Material UIand制作表格React。这是我到目前为止：

import React from 'react'
import {Button, TextField} from '@material-ui/core'
import AddIcon from '@material-ui/icons/Add'
import PropTypes from 'prop-types'

class AddItem extends React.Component {

    state = {
        text: ''
    }

    handleChange = e => {
        this.setState({text: e.target.value})
    }

    render() {
        return (
            <form onSubmit={this.props.onSubmit(this.state.text)}>
                <TextField id="task" label="Task" placeholder="e.g. Feed the fish" value={this.state.text}
                           onChange={this.handleChange} color="secondary" variant="outlined" size="small"/>
                <Button color="secondary" variant="outlined" endIcon={<AddIcon/>} size="large">
                    Add
                </Button>
            </form>
        )
    }
}

AddItem.propTypes = {
    onSubmit: PropTypes.func.isRequired
}

export default AddItem …

我有2个div(每个6列).在左边的div是一个图像,右边的div是一些引用.我希望我的正确div的高度与图像的高度相同.

这是我的代码:http://codepen.io/matysflance/pen/PZXdBK

<div id="testimonials" class="container-fluid testimonials">
    <div class="row">
        <div class="col-lg-6 image">
                <img src="http://placehold.it/1100x700/f3e42a" alt="">
        </div>
        <div class="col-lg-6 quote">
            <blockquote>
                <p>"Integer posuere erat a ante venenatis dapibus posuere veit al..." </p>
                <cite>Susan Sims, Interaction Designer at XYZ</cite>
            </blockquote>
        </div>
    </div>
</div>

我有一个<img>右边的面板,其中包含一个控件标题和一长串项目.所以我有一个嵌套的flexbox情况:

.container (flex)
 -> .child img
 -> .child controls panel (flex)
  -> .controls
  -> .content-wrapper scrolling list

在一个非常基本的层面上,两个并排面板很容易,是一个简单的flex align-items: stretch... https://codepen.io/neekfenwick/pen/MOxYxz

在这个基本级别上,如何保持两个并排相同高度的div是一个重复的问题？.

一旦右侧的面板与垂直滚动列表变得更加复杂,我无法看到如何使其父级的高度,第二个.child与第一个的高度相匹配.child. https://codepen.io/neekfenwick/pen/XzGJGw

+-------------+---------------+
|             |  Controls     |
| Left child  |               |
|             +---------------+
|             |              A|
|             | Vertically   |+
|             | scrolling    ||
|             | items        ||
|             |              |+
|             |              V|
+-------------+---------------+

我已经阅读了具有可滚动内容的Flexbox项目,但这解决了水平滚动问题,而不是像这样的垂直布局.另外,带滚动区域的嵌套弹性框处理垂直堆叠的嵌套弹性框,我认为这种组合row和column方向混淆了我的情况.

作为代码段:

.container …

我拿了一个我发现的定价表HTML/CSS/JS,并决定尝试弯曲它以满足我对给定页面的需求.不幸的是,我碰到了一堵墙.以下小提琴是目前表格的HTML和CSS的简单示例:

https://jsfiddle.net/jv89hopf/1/

为了使各列均匀地间隔开出跨页的宽度,无论我使用的列数的display:table,table-layout:fixed和display:table-cell.这非常有效,当我添加或删除列时,表会根据需要进行调整以填充空间

现在问题是当一列高于其他列时.我希望所有列都能拉伸以匹配最高柱的高度.

查看Chrome检查器时,我可以看到表格单元格完全填满了高度:

现在我需要的是这个表格单元格的子节点填充高度(在上面提供的小提琴中,这将是.price-wrapper- 它需要填充.price-list li)

我试过了两个:

1. height: 100%
2. position: absolute; top:0; bottom:0; left:0; right:0;

前者由于某种原因没有做任何事情,后者倒塌.price-list到0像素高(因为只有高度的孩子绝对定位,因此从流程中移除)

如果我能够.price-wrapper正确地达到100%的高度,.price-list li那么我可以使用display:table并将display:table-row"立即购买"按钮推到底部并获得所需的外观:

在bootsrtap 3中可以让孩子div与父母一样高吗？

这是一个例子

    <div class="row clearfix">
        <div class="col-md-6" style="background-color:red;">

 VERY LONG TEXT, JUST LONER< AND LONGER, AND LONGER, AND LONGER 
        </div>
        <div class="col-md-6" style="background-color:green;">

SHORT TXT
        </div>
    </div>

我希望右侧col与左列相同的高度是否可以轻松实现？