Question

因此，我有一个非常简单的网格布局，具有3列。第三列有3个项目，分别是标题，div和输入元素。

将width=100%;设置为input，我认为它适合第三列的实际大小，但显然它比div更大。

我认为这将是会话div的填充，但事实证明，即使删除填充后，仍然存在重叠。

编辑：输入项只能采用第三列的长度。

body {
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 9fr;
}

.directories {
  background-color: rgb(17, 200, 110);
}

.chats {
  background-color: rgb(220, 220, 120);
  height: 100vh;
}

.conversation {
  background-color: rgb(220, 20, 120);
  padding: 8px; 
  position: relative;
}

.conversation-head {
  position: sticky;
  top: 0;
  background-color: white;
}

input {
  min-width: 100%;
  max-width: 100%;
  height: 32px;
  position: absolute;
  bottom: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div class="wrapper">

    <div class="directories">
      Something Something
    </div>
    <div class="chats">
      Chat Chat Chat
    </div>
    <div class="conversation">

      <div class="conversation-head">
        Front-End
      </div>
      <div class="conversation-txt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, laboriosam repudiandae perspiciatis possimus minus quam explicabo dolores corrupti asperiores alias saepe, animi cumque mollitia labore atque veniam debitis modi quibusdam.
      </div>

      <input type="text" placeholder="Enter your message">

    </div>

  </div>

</body>

</html>

Answer 1

您应删除input的position：absolute，其绝对位置是相对于父级的（相对于position），而忽略父级元素的填充

Answer 2

代替位置：绝对可以使用flexbox容器，在该容器中放置输入并确定其大小会更容易

body {
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 9fr;
}

.directories {
  background-color: rgb(17, 200, 110);
}

.chats {
  background-color: rgb(220, 220, 120);
  height: 100vh;
}

.conversation {
  background-color: rgb(220, 20, 120);
  padding: 8px; 
  position: relative;
  display:flex; /* added*/
  flex-direction:column; /* added*/
}

.conversation-head {
  position: sticky;
  top: 0;
  background-color: white;
}

input {
  width: 100%; /* added*/
  box-sizing:border-box; /* added*/
  height: 32px;
  margin:auto 0 5px; /* added*/
}

<div class="wrapper">

    <div class="directories">
      Something Something
    </div>
    <div class="chats">
      Chat Chat Chat
    </div>
    <div class="conversation">

      <div class="conversation-head">
        Front-End
      </div>
      <div class="conversation-txt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, laboriosam repudiandae perspiciatis possimus minus quam explicabo dolores corrupti asperiores alias saepe, animi cumque mollitia labore atque veniam debitis modi quibusdam.
      </div>

      <input type="text" placeholder="Enter your message">

    </div>

  </div>

Answer 3

使用此

import setOptions from './setOptions.js'

const state = {
  fieldInfo: {}
}

const actions = {
  async getOptions({ commit }) {
    commit('setOptions', await Vue.axios.options('/'))
  }
}

const mutations = {
  setOptions
}

export default {
  namespaced: true,
  state,
  actions,
  mutations
}

希望这是可行的

输入字段无法调整为div宽度

3 个答案: