मेरे पास एक min-height वाला एक बॉक्स है जो कुछ सक्रिय टेक्स्ट दिखाने वाला है जो बटन क्लिक पर बदलता है (बटन स्निपेट में काम नहीं करेगा, कृपया संबंधित वर्ग में अस्पष्टता बदलकर क्लिक का अनुकरण करें)।

यह माना जाता है कि बटन हमेशा बॉक्स के नीचे स्थित होता है और .content बाकी बॉक्स को शुरुआत से शुरू होने वाले टेक्स्ट से भर देगा। इसके अतिरिक्त, चूंकि टेक्स्ट की लंबाई अलग-अलग होती है, मैं चाहता हूं कि बॉक्स टेक्स्ट के साथ बढ़े (बटन अभी भी नीचे और .content ऊपर है)।

ऐसा मैं किस प्रकार करूं? मुझे इतना ही मिला:

.item-1 {
  opacity: 0;
}

.item-2 {
  opacity: 1;
}

.item-3 {
  opacity: 0;
}

.wrapper {
  background-color: yellow;
  min-height: 20rem;
  width: 400px;
  
  padding: 4rem;
  box-sizing: border-box;
  
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

p {
  margin: 0;
}

.content {
  position: relative;
  flex: 1 1 auto;
}

button {
  flex: 0 1 auto;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
}

.active {
  opacity: 1;
}
<div class="wrapper">

  <div class="content">
    <p class="item item-1">Test 1<p/>
    <p class="item item-2">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed  diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. d tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <p/>
    <p class="item item-3">Test 3<p/>
  </div>
  
  <button id="next">Next</button>  

</div>
0
Tom 28 अक्टूबर 2020, 21:46

1 उत्तर

सबसे बढ़िया उत्तर
var content = document.getElementById("content");

var addContent = function() {
  content.innerHTML += " The quick brown fox jumps over the lazy dog"
}
.parent {
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.content {
  background-color: #f3aaf3;
  min-height: 50px;
  overflow: auto;
}

.btn {
  bottom: 16px;
  margin-top: 32px;
  padding: 8px;
}
<div class="parent">
  <div id="content" class="content">
    The quick brown fox jumps over the lazy dog
  </div>
  <button class="btn" onclick="addContent()">Add content</button>
</div>

स्निपेट अपडेट किया गया:

enter image description here

फिर से अपडेट किया गया, अब यह नीचे की ओर रहने वाले बटन के साथ सामग्री के साथ बढ़ेगा:

enter image description here

1
0leg 28 अक्टूबर 2020, 19:28