英文:
Tailwind: Parent dynamically fit child height
问题
我有一个图像作为页眉，还有文本和按钮需要显示在页眉图像的顶部。我想要实现的目标是，在小型媒体屏幕上，我希望将图像页眉的高度相应地更改为文本以及按钮的高度。
基本上这是我在这里尝试实现的内容。（来自另一个示例网站）：
[![来自另一个网站的示例][1]][1]
但是我的代码给我这个结果：
[![在此输入图像描述][2]][2]
[1]: https://i.stack.imgur.com/xyzs6.png
[2]: https://i.stack.imgur.com/DhAja.jpg
```jsx
const styles = {
backgroundImage: `url(${banner})`,
backgroundSize: 'cover',
backgroundPosition: 'right',
};
<section className="container-banner relative">
<div className='gambar h-[50vh]' style={styles}>
<div className='absolute inset-0 bg-gray-700 bg-opacity-60 md:bg-opacity-0'>
<div className="flex absolute top-28 md:left-1/2 md:transform md:-translate-x-1/2 md:text-left md:w-[1400px] md:top-44">
<div className='flex-col justify-center mx-auto md:flex-1 w-10/12 md:mx-auto'>
<h1 className='text-2xl font-bold text-gray-100 md:text-text md:text-6xl md:leading-tight'>Pakar dalam merealisasikan perabot impian anda.</h1>
<p className='mt-4 text-sm text-gray-100 md:mx-auto md:text-text md:leading-relaxed md:text-2xl'>Kami menghidupkan idea anda dengan kepakaran kami dalam kerja kayu tersuai. Hubungi kami hari ini untuk bermula!</p>
<a href="/contact-us"><button className='group font-semibold px-7 py-4 mt-8 bg-ascent-default text-black rounded-lg md:text-2xl hover:bg-ascent-dark duration-150'>联系我们 <FontAwesomeIcon icon={faAngleRight} className='text-base group-hover:translate-x-1 duration-150' /></button></a>
</div>
<div className='w-0 bg-red md:flex-1'></div>
</div>
</div>
</div>
</section>
我尝试过的一些试错方法是将minHeight和maxHeight添加到100％，但这并不起作用。顺便说一下，忽略了混乱的Tailwind媒体查询，因为我仍然在学习响应式设计的过程中。请帮帮我！
<details>
<summary>英文:</summary>
I have an image as the header and text as well as button that need to appear on top of the header image. What i want to achieve is, in the small media screen, i want to make the height of image header change accordingly to the height of the text as well as the button.
This is basically what I try to achieve here. (Taken from an example site):
[![Example taken from another site][1]][1]
But my code below give me this:
[![enter image description here][2]][2]
[1]: https://i.stack.imgur.com/xyzs6.png
[2]: https://i.stack.imgur.com/DhAja.jpg
const styles = {
backgroundImage: `url(${banner})`,
backgroundSize: 'cover',
backgroundPosition: 'right',
};
<section className="container-banner relative">
<div className='gambar h-[50vh]' style={styles} >
<div className='absolute inset-0 bg-gray-700 bg-opacity-60 md:bg-opacity-0'>
<div className="flex absolute top-28 md:left-1/2 md:transform md:-translate-x-1/2 md:text-left md:w-[1400px] md:top-44">
<div className='flex-col justify-center mx-auto md:flex-1 w-10/12 md:mx-auto'>
<h1 className='text-2xl font-bold text-gray-100 md:text-text md:text-6xl md:leading-tight '>Pakar dalam merealisasikan perabot impian anda.</h1>
<p className='mt-4 text-sm text-gray-100 md:mx-auto md:text-text md:leading-relaxed md:text-2xl'>Kami menghidupkan idea anda dengan kepakaran kami dalam kerja kayu tersuai. Hubungi kami hari ini untuk bermula!</p>
<a href="/contact-us"><button className='group font-semibold px-7 py-4 mt-8 bg-ascent-default text-black rounded-lg md:text-2xl hover:bg-ascent-dark duration-150'>Contact Us <FontAwesomeIcon icon={faAngleRight} className='text-base group-hover:translate-x-1 duration-150' /></button></a>
</div>
<div className='w-0 bg-red md:flex-1'></div>
</div>
</div>
</div>
</section>
Some try and error method i have tried is add minHeight and maxHeight to 100%, but it doesn't work. Btw, please ignore the messy tailwind media query since i'm still in the learning process of the responsive. Please help me!
</details>
# 答案1
**得分**: 1
请不要使用 `position: absolute`。不使用 `position: absolute`，元素将位于布局流中，具有背景的 `<div>` 可以根据其内部内容调整其高度。
```html
<script src="https://cdn.tailwindcss.com"></script>
<section class="container-banner relative">
<div class='gambar' style="background-image: url(https://picsum.photos/1000/1000); background-size: cover; background-position: right">
<div class='bg-gray-700 bg-opacity-60 md:bg-opacity-0'>
<div class="relative flex pt-28 md:left-1/2 md:transform md:-translate-x-1/2 md:text-left md:w-[1400px] md:pt-44">
<div class='flex-col justify-center mx-auto md:flex-1 w-10/12 md:mx-auto'>
<h1 class='text-2xl font-bold text-gray-100 md:text-text md:text-6xl md:leading-tight '>Pakar dalam merealisasikan perabot impian anda.</h1>
<p class='mt-4 text-sm text-gray-100 md:mx-auto md:text-text md:leading-relaxed md:text-2xl'>Kami menghidupkan idea anda dengan kepakaran kami dalam kerja kayu tersuai. Hubungi kami hari ini untuk bermula!</p>
<a href="/contact-us"><button class='group font-semibold px-7 py-4 mt-8 bg-ascent-default text-black rounded-lg md:text-2xl hover-bg-ascent-dark duration-150'>Contact Us <FontAwesomeIcon icon={faAngleRight} class='text-base group-hover-translate-x-1 duration-150'>FontAwesomeIcon</FontAwesomeIcon></button></a>
</div>
<div class='w-0 bg-red md:flex-1'></div>
</div>
</div>
</div>
</section>
英文:
Consider not using position: absolute. By not using position: absolute, the element would be within the layout flow and the <div> with the background can adjust its height to its inner content.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<section class="container-banner relative">
<div class='gambar' style="background-image: url(https://picsum.photos/1000/1000); background-size: cover; background-position: right">
<div class='bg-gray-700 bg-opacity-60 md:bg-opacity-0'>
<div class="relative flex pt-28 md:left-1/2 md:transform md:-translate-x-1/2 md:text-left md:w-[1400px] md:pt-44">
<div class='flex-col justify-center mx-auto md:flex-1 w-10/12 md:mx-auto'>
<h1 class='text-2xl font-bold text-gray-100 md:text-text md:text-6xl md:leading-tight '>Pakar dalam merealisasikan perabot impian anda.</h1>
<p class='mt-4 text-sm text-gray-100 md:mx-auto md:text-text md:leading-relaxed md:text-2xl'>Kami menghidupkan idea anda dengan kepakaran kami dalam kerja kayu tersuai. Hubungi kami hari ini untuk bermula!</p>
<a href="/contact-us"><button class='group font-semibold px-7 py-4 mt-8 bg-ascent-default text-black rounded-lg md:text-2xl hover:bg-ascent-dark duration-150'>Contact Us <FontAwesomeIcon icon={faAngleRight} class='text-base group-hover:translate-x-1 duration-150'>FontAwesomeIcon</FontAwesomeIcon></button></a>
</div>
<div class='w-0 bg-red md:flex-1'></div>
</div>
</div>
</div>
</section>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论