如何用js根据屏幕高度控制div高度

Posted 2023-04-12

想让一个div的高度是当前屏幕的50%，用js怎么获取当前屏幕的高度，并让div实现这个50%的效果？
每个屏幕尺寸不同，就想让一个div就在屏幕中间滚动。

javascript screen对象获取屏幕宽高如alert(screen.height)
availHeight 属性 -- 窗口可以使用的屏幕高度，单位像素
availWidth 属性 -- 窗口可以使用的屏幕宽度，单位像素
colorDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)
pixelDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE不支持)
height 属性 -- 屏幕的高度，单位像素
width 属性 -- 屏幕的宽度，单位像素

div设置定位,宽度高度设为屏幕一般半即可，至于居中的话可以绝对定位 参考技术A 下面设定你想让的div 类名 是center 他的宽度是 300px 高度是 200px
注意
需要引用jquery脚本
center 的样式.centerwidth:300px;height:200px;position:absolute; z-index:9999;
那么在js 里面 写入
var aa=document.body.clientHeight; //网页 可见区域的高度
var dd=cc/2; //网页 当前屏幕的50%的高度
var cc=dd-100;//100 是center 高度除以2得来的
var hh=document.body.clientHeight; //网页 可见区域的高度
var gg=cc/2; //网页 当前屏幕的50%的高度
var ff=dd-150;//150 是center 宽度除以2得来的
$(".center").css('left':ff+'px');//类名为center 距离左侧距离 参考技术B 感觉不需要js，你说的这个效果css就可以实现吧
让div高度等于屏幕的50%的话，首先给body,html设置高度百分之百，然后给div设置50%的高度就行了，一直在中间滚动的话给div设置固定定位就好了
代码：
html,bodyheight:100%;
divheight:50%;position:fixed;top:25%;left:0;

如何用内容改变textarea的高度？

我试图根据内容高度更改textarea的高度。我发现事件处理程序不会改变高度，因为它被bootstrap样式覆盖。请帮忙！

class PostForm extends React.Component {
  constructor(props){
    super(props);
    this.state = {titleHeight: '30', storyHeight: 1};                                                    
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }
  handleKeyUp(event){
    this.setState({titleHeight: document.getElementById('post_title').scrollHeight});
    this.setState({storyHeight: document.getElementById('post_story').scrollHeight});
  }
  render () {
        var csrfToken = $('meta[name=csrf-token]').attr('content');
        return (
          <form action='create' method='post' acceptCharset='UTF-8' className= "form-group">
            <input type='hidden' name='_method' value='patch'/>
            <input type='hidden' name='utf8' value='✓' />
            <input type='hidden' name='authenticity_token' value={csrfToken} />
            <textarea id="post_title" name="post[title]" className="form-control boldText" style={formStyle.textArea} height={this.state.titleHeight} onKeyUp={this.handleKeyUp} placeholder="Title"/>
            <textarea id="post_story" name="post[story]" className="form-control" style={formStyle.textArea} height={this.state.storyHeight} onKeyUp={this.handleKeyUp} placeholder="Start telling the story"/>
            <input name="commit" type="submit" value="Post" className="btn" style={formStyle.button}/>
          </form>
        );
  }
}

const formStyle = {
  textArea: {
    border: 5,
    boxShadow: 'none',
    margin: 5,
    overflow: 'hidden',
    resize: 'none',
    ariaHidden: 'true',
  },
  button: {
    backgroundColor: 'black',
    color: 'white',
    width: 70,
    marginLeft: 18,
    marginRight: 5,
  },
}

答案

textarea HTML component没有属性height，但你可以用于此目的的属性rows（例如<textarea rows={Math.round(this.state.storyHeight)} ... />）。

没有CSS样式会覆盖你在style属性中传递的内容，它的工作方式相反。但无论如何，你的height定义中没有formStyle。

另一答案

你可以用ref属性做你想做的事

export default class Textarea extends Component {

  componentDidMount () {
    if (this.multilineTextarea) {
      this.multilineTextarea.style.height = 'auto';
    }
  }

  changeTextarea = () => {
    this.multilineTextarea.style.height = 'auto';
    this.multilineTextarea.style.height = this.multilineTextarea.scrollHeight + 'px';
  }

  render () {
    return (
      <textarea
        onChange={this.changeTextarea}
        ref={ref => this.multilineTextarea = ref}
      />
    );
  }
}

Also here is working DEMO