要实现标题栏自动高度的效果，可以使用下面的代码示例：

HTML:

  
标题

CSS:

#title-bar {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

#title {
  margin: 0;
}

/* 根据需要调整标题栏的高度 */
#title-bar.auto-height {
  height: auto;
}

/* 根据需要调整标题的样式 */
#title.auto-height {
  font-size: 24px;
}

JavaScript:

// 获取标题栏和标题元素
var titleBar = document.getElementById("title-bar");
var title = document.getElementById("title");

// 添加或移除自动高度的类
function toggleAutoHeight() {
  titleBar.classList.toggle("auto-height");
  title.classList.toggle("auto-height");
}

// 监听窗口大小变化事件，自动调整标题栏高度
window.addEventListener("resize", function() {
  if (titleBar.classList.contains("auto-height")) {
    var titleHeight = title.offsetHeight;
    titleBar.style.height = titleHeight + "px";
  }
});

// 示例：初始时自动设置标题栏高度
toggleAutoHeight();

通过上述代码示例，可以实现一个具有自动高度的标题栏。在CSS中，可以根据需要调整标题栏和标题的样式。JavaScript部分通过监听窗口大小变化事件，实时计算标题元素的高度，并将其设置为标题栏的高度。可以通过调用toggleAutoHeight()函数来切换是否启用自动高度功能。